Skip to main content

angular material - Navigation list with button and icon

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  colors = ["Red","Green","Blue","Pink","Azure"];
  message:string = "";

  onClick(color:string){
    this.message = color + " button clicked";
  }
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:16px;">
  Angular Material - Navigation list with button and icon
</h2>

<h3>{{message}}</h3>


<mat-nav-list>
  <mat-list-item *ngFor="let color of colors">
     
    <a matLine href="#">
      {{color}}
    </a>
    
    <button mat-icon-button (click)="onClick(color)">
        <mat-icon>check_circle</mat-icon>
    </button>
  
  </mat-list-item>
</mat-nav-list>
app.module.ts [import] 

import { MatListModule } from '@angular/material/list'
import { MatButtonModule } from '@angular/material/button'
import { MatIconModule } from '@angular/material/icon';
More Angular tutorials
Labels: