How to create a self-updating navigation menu in Angular

Rather than hardcoding hyperlinks or buttons to create your website/web app’s navigation menu, you can leverage Angular Routes to pass data to a Menu Component that decides whether or not to render that data based on conditionals! What does that mean?

You never have to manually code navigation menus in HTML again. Instead, you can create an Angular (or plain Javascript) component, aka template, that is smart enough to create the actual code that the browser needs to render your menu.

Example

Ultimately, as a cloud engineer, your goal should be to create settings so others can modify your code without touching or modifying the actual code. (That is what user interface/content management system developers, like myself, have been obsessing over the past decade.)

That’s why I chose to pass the following variables to create the menu:

1. show: boolean – sets whether or not the navigation link gets displayed in the menu
2. showChildren: boolean – determines whether or not to match the exact parameter of the router link when navigating the route
3. navLabel: string – sets what the label should be for the navigation menu button
4. navIcon: string – decides which SVG should be included for the navigation menu button
5. title: string – sets the title attribute of the page as well as the title meta tags
6. description: string – sets the description meta tags appropriate to the page

Here is an example of one of my routes in JSON format:

app-routing.module

export const routes: Routes = [{
  path: '',
  component: PageIndexComponent,
  data: {
    show: true,
    showChildren: false,
    navLabel: 'Home',
    title: 'Cloud Engineering Studio',
    description: 'Adaptive smart learning: cloud engineering based on human behavior',
    icon: 'house'
  }
}];

Here is the HTML template I used to display the above data:

menu.component

<nav>
  <ng-container *ngFor="let route of currentRoutes">
     <ces-button *ngIf='route.data.show && !route.data.showChildren' ngClass='nav-button' size='small' [routerLink]="[route.path]"
[title]="route.data.title" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}" >
     <ces-svgs [type]="route.data.icon" class="icon"></ces-svgs><br>{{ route.data.navLabel }} 
     </ces-button>

     <ces-button *ngIf='route.data.show && route.data.showChildren' ngClass='nav-button' size='small' [routerLink]="[route.path]" [title]="route.data.title" routerLinkActive="active">
     <ces-svgs [type]="route.data.icon" class="icon"></ces-svgs><br>
     {{ route.data.navLabel }} 
     </ces-button>

   </ng-container>
 </nav>