How to display the menu depending on the user's role?

Question

Angular

Hello! I started learning Angular and came across a trail. situation. I need, if for example the route contains "/account/{any routes}" to display one menu, if "/admin/{any routes}" is the admin menu. How to do this?)

Answer 1

There are several options that come to mind. But since the difference between "account" and "admin" most often does not end with just the menu, I think that wrappers are best suited.
First we have 2 different menu components, for the "account" and "admin" sections. Let them be called "app-user-menu" and ""
For example, we create 2 components (wrappers) in /shared/layout/wrapper : user-wrapper and admin-wrapper

<!-- User Wrapper -->
<header></header>
<app-user-menu></app-user-menu>
<main>
  <router-outlet></router-outlet>
</main>
<footer><footer>

<!-- Admin Wrapper -->
<app-admin-header></app-admin-header>
<app-admin-menu></app-admin-menu>
<main>
  <router-outlet></router-outlet>
</main>
<footer><footer>

And in the routes we wrap the child components in our wrappers

// routing
export const routes: Routes = [
  { path: 'account', component: UserWrapperComponent, children: [ ... ] }.
  { path: 'admin', component: AdminWrapperComponent, children: [ ... ] }
];

As a result, you can make a completely different structure for different routes. We add AuthGuard to "admin" and now only authorized users have access to the section