Angular Material Menu with RouterLink
September 30, 2022
On this page we learn to use RouterLink
as menu item in our Angular Material routing application.
1. The
RouterLink
is used with an element in a template that makes the element a link that initiates navigation to a route.
2. Navigation opens routed components in
<router-outlet>
location on the page.
3. Angular Material Menu is created using
<mat-menu>
element.
4. Menu items are created using HTML element or icon with
mat-menu-item
attribute.
Technologies Used
Find the technologies being used in our example.1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0
Creating Menu Items with RouterLink
Here we will create menu items using<a>
tag with mat-menu-item
and routerLink
attributes.
<mat-menu #appMenu="matMenu"> <ng-template matMenuContent> <a mat-menu-item routerLink="/home" routerLinkActive="active-link">Home</a> <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link">Add Book</a> <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link">Manage Book</a> </ng-template> </mat-menu> <nav> <button mat-raised-button [matMenuTriggerFor]="appMenu">Book</button> </nav>

------ <nav> <button mat-raised-button [matMenuTriggerFor]="appMenu1"> Book </button> <button mat-raised-button [matMenuTriggerFor]="appMenu2"> Java Tech </button> <button mat-raised-button [matMenuTriggerFor]="appMenu3"> Framework </button> ------ </nav>
Creating Menu Items with Icons and RouterLink
Here we are using menu items as icons. Menu items will be aRouterLink
and display items as icons in menu panel.
<mat-menu #appMenu="matMenu"> <ng-template matMenuContent> <a mat-menu-item routerLink="/home" routerLinkActive="active-link"> <mat-icon>home</mat-icon> <span>Home</span> </a> <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link"> <mat-icon>book</mat-icon> <span>Add Book</span> </a> <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link"> <mat-icon>book</mat-icon> <span>Manage Book</span> </a> </ng-template> </mat-menu> <nav> <button mat-icon-button [matMenuTriggerFor]="appMenu"> <mat-icon>more_vert</mat-icon> </button> </nav>

Complete Example
app.component.html<mat-menu #appMenu="matMenu"> <ng-template matMenuContent> <a mat-menu-item routerLink="/home" routerLinkActive="active-link"> <mat-icon>home</mat-icon> <span>Home</span> </a> <a mat-menu-item routerLink="/add-book" routerLinkActive="active-link"> <mat-icon>book</mat-icon> <span>Add Book</span> </a> <a mat-menu-item routerLink="/manage-book" routerLinkActive="active-link"> <mat-icon>book</mat-icon> <span>Manage Book</span> </a> </ng-template> </mat-menu> <nav> <button mat-icon-button [matMenuTriggerFor]="appMenu"> <mat-icon>more_vert</mat-icon> </button> </nav> <div> <router-outlet></router-outlet> </div>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
.active-link { color: #F20B22; }
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AddBookComponent } from './add-book/add-book.component'; import { ManageBookComponent } from './manage-book/manage-book.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'add-book', component: AddBookComponent }, { path: 'manage-book', component: ManageBookComponent }, ------ ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule{ }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { MatMenuModule } from '@angular/material/menu'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, MatMenuModule, MatIconModule, MatButtonModule, AppRoutingModule ], declarations: [ AppComponent ------ ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
References
Angular Material MenuRouterLink