Skip to main content

angular material - Action list with button and icon

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .iconStyle{
      margin-right:8px;
    }
  `]
})


export class AppComponent {
  message:string = "";

  onDelete(){
    this.message = "Delete action list item clicked.";
  }

  onRestore(){
    this.message = "Restore action list item clicked.";
  }

  onDownload(){
    this.message = "Download action list item clicked.";
  }

  onUpload(){
    this.message = "Upload action list item clicked.";
  }
}
app.component.html 

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

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


<mat-action-list>
  <button mat-list-item (click)="onDelete()">
    <mat-icon class="iconStyle">delete</mat-icon>
    Delete
  </button>

  <button mat-list-item (click)="onRestore()">
    <mat-icon class="iconStyle">restore</mat-icon>
    Restore
  </button>

  <button mat-list-item (click)="onDownload()">
    <mat-icon class="iconStyle">download</mat-icon>
    Download
  </button>

  <button mat-list-item (click)="onUpload()">
    <mat-icon  class="iconStyle">upload</mat-icon>
    Upload
  </button>
</mat-action-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: