angular material - How to use List

app.component.html

<h2 style="padding-top:25px; padding-bottom:16px;">
  Angular Material - How to use List
</h2>


<mat-list>
  <mat-list-item>Red</mat-list-item>
  <mat-list-item>Green</mat-list-item>
  <mat-list-item>Blue</mat-list-item>
  <mat-list-item>Yellow</mat-list-item>
  <mat-list-item>Black</mat-list-item>
  <mat-list-item>Pink</mat-list-item>
</mat-list>

app.module.ts [import]

import { MatListModule } from '@angular/material/list'

More Angular tutorials

• angular material - Action bar inside an Expansion Panel
• angular material - Expansion Panel opened & closed event
• angular material - How to use Accordion flat display mode
• angular material - Open & close Expansion Panel on button click
• angular material - Expansion Panel afterExpand & afterCollapse event
• angular material - How to initially expand Expansion Panel
• angular material - Expansion Panel header expanded background color
• angular material - Accordion expanded panels header background color
• angular material - List items separator
• angular material - How to generate List items from array
• angular material - How to use List dense layout mode
• angular material - How to use Navigation List
• angular material - How to use Action List
• angular material - Action list with button and icon
• angular material - How to use Selection List