CASL control on Angular Navigation

[weilies]

Let say i have a navigation links widget with many links

...
<a mat-list-item [routerLink]="'/leave_req'">Leave Request</a>
<a mat-list-item [routerLink]="'/leave_ops'">Leave Operation</a>
<a mat-list-item [routerLink]="'/leave_config'">Leave Config</a>
...

What's the working codes to
Leave Request - show to 'Employee', 'Operator' and 'Admin' role
Leave Operation - only show to 'Operator'
Leave Config - only show to 'Admin'
I am not keen for the show/hide logic to apply in my HTML because as user might simply guess the navigation to abuse the admin/operation screen. What's the better approach?

Thanks

[stalniy]

anyway you need to hide links first. Then read this https://medium.com/@sergiy.stotskiy/so-there-are-several-approaches-3ee962fb9fb5 . This is an answer for using casl with Vue router but you can use the similar logic for Angular router

[stalniy]

as far as I remember the router in Angular should have guards. You can create this guards to prevent user visiting some pages.

[stalniy]

Close as there is no action items from my side.

Thanks for using casl!