Components

List

Angular Material List is a simple way to display a list of items, optionally with icons, avatars, or selection support.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material List and gives it a more modern appearance.

Basic list

Item 1

Item 2

Item 3

Nav list

List with sections

Folders

Photos

Jan 1, 2016

Recipes

Jan 17, 2016

Work

Jan 28, 2016

Notes

Vacation Itinerary

Feb 20, 2016

Kitchen Remodel

Jan 18, 2016

Single line list

This is the title

Also the title

Two line list

TitleSecond line

Title Second line

Three line list

TitleSecond lineThird line

TitleSecond line. This line will truncate.Third line

TitleSecond line. This line will truncate. Third line

Three line lust with secondary text wrapping

Title Secondary line that will wrap because the list lines is explicitly set to 3 lines. Text inside of a 'matListItemTitle' or 'matListItemLine' will never wrap.

Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

<mat-list>
  <mat-list-item>
    <mat-icon svgIcon="notebook-text" matListItemIcon />
    Item 1
  </mat-list-item>
  <mat-list-item>
    <mat-icon svgIcon="notebook-text" matListItemIcon />
    Item 2
  </mat-list-item>
  <mat-list-item>
    <mat-icon svgIcon="notebook-text" matListItemIcon />
    Item 3
  </mat-list-item>
</mat-list>

<mat-selection-list [multiple]="true">
  @for (shoe of typesOfShoes; track shoe) {
    <mat-list-option [value]="shoe">{{ shoe }}</mat-list-option>
  }
</mat-selection-list>