Here are my routes:

export const routes: Routes =[
{
    path: '', component: DefaultLayoutComponent, canActivate: [AuthGuard], canActivateChild: [AuthGuard],
    children: [
      { path: 'dashboard', component: DashboardComponent },
      {
        path: 'admin-only', component: AdminOnlyComponent,
        data: { authorize: (c: any) => c.role == "Admin" }
      },
      {
        path: 'admin-or-teacher', component: AdminOrTeacherComponent,
        data: { authorize: (c: any) => c.role == "Admin" || c.role == "Teacher" }
      }
]

Inside the AuthGuard I execute the authorize method to decide whether to activate the route or not. which is working perfectly fine.

Now inside the dashboard components, I have following nav links.

<ul class="nav flex-column w-100 px-3">
    <li class="nav-item">
      <a class="nav-link" routerLink="/admin-only">Admin Only</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/admin-or-teacher">Admin Or Teacher</a>
    </li>
</ul>

I want to re-use the same call back authorize to hide these links based on user claims. How to do it?