How to manage menu based on user roles/permissions in angular

Question

I have started a new angular project, In my application have 3 types of users (admin, customer, and company). How can restrict customers from access admin users menus?

Answer 1

You can use ngx-permissions library. It support lazy loading, isolated lazy loading, then else syntax. Load library

@NgModule({

 imports: [

 NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})

Load roles

this.ngxRolesService.addRole('GUEST', () => {
  return true;
}); 

Secure root

const appRoutes: Routes = [
{ path: 'home',
    component: HomeComponent,
    canActivate: [NgxPermissionsGuard],
    data: {
      permissions: {
        only: 'GUEST'
      }
    }
  },
];

Detailed documentation you can find on WIKI page