Skip to main content

angular material - How to use Action List

app.component.ts 

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

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


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 - How to use Action List
</h2>

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


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

  <button mat-list-item (click)="onRestore()">
    Restore
  </button>

  <button mat-list-item (click)="onDownload()">
    Download
  </button>

  <button mat-list-item (click)="onUpload()">
    Upload
  </button>
</mat-action-list>
app.module.ts [import] 

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