Angular Material List Example

Angular Material List creates a list with list items with Material design. The basic element for Material list is mat-list and to create list item, mat-list-item is used. Angular Material provides mat-nav-list for navigation list. For selection List, we need to create list using mat-selection-list and mat-list-option. It creates the list item with a checkbox and its label.

<mat-list> is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own.

Table of Contents

Angular Material Simple lists

<mat-list>
   <mat-list-item> Pizza 🍕  </mat-list-item>
   <mat-list-item> Donut 🥯  </mat-list-item>
   <mat-list-item> Hamburger 🍔 </mat-list-item>
</mat-list>

Output :

And you will get output something like this.

Example Source Code

Angular Material Navigation lists

The mat-nav-list is the selector of MatNavList directive.

The mat-nav-list contains mat-nav-item. The mat-nav-list is used to create navigation list.

<mat-nav-list>
    <a mat-list-item href="..."   *ngFor ="let link of links "> {{ link }} </a>
<mat-nav-list>

app.component.html

<mat-nav-list>
   <mat-list-item *ngFor ="let link of links">
       <a matLine   href ="..."> {{  link }} </a>
       <button mat-icon-button (click)= "showInfo(link)">
       <mat-icon> info </mat-icon>
        </button>
  <mat-list-item>

<mat-nav-list>

Angular Material Action lists

When each item in the list performs some action, use the <mat-action-list> element. Each item in the list is the <button> element.

Simple action lists will use the mat-list-item attribute on button tag elements:

<mat-action-list>
   <button mat-list-item (click) = "save()"> Save </button>
   <button mat-list-item (click) = "undo()"> Undo </button>
</mat-action-list>

Angular Material Selection lists

It provides an interface to select values, where every list item is an option.

app.module.ts

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

/**
 * @title List with selection
 */

@Component({
  selector: 'list-selection-example',
  styleUrls: ['list-selection-example.css'],
  templateUrl: 'list-selection-example.html',
})
export class ListSelectionExample {
  typesOfLaptop: string[] = ['Apple', 'HP', 'Lenovo', 'Dell', 'Acer','Asus'];
}

app.component.html

<mat-selection-list  #laptop >
<mat-list-option *ngFor="let laptop of typesOfLaptop">
  {{laptop}}
</mat-list-option>
</mat-selection-list>

<p [style.background]="'skyblue'">
Options selected : <strong [style.color]="'red'">{{ laptop.selectedOptions.selected.length}}</strong>
</p>

Output :

And you will get output something like this.

Example Source Code

Angular Material Multi-line lists

Lists that require multiple lines per item, annotate each line with a matline attribute.

<!-- Two line list -->

<mat-list>
    <mat-list-item *ngFor ="let message of messages">
          <h3 matLine> {{message.from}} </h3>
          <p matLine>
             <span>{{message.subject}}</span>
             <span > {{message.content}}</span>
          </p>
    <mat-list-item>
<mat-list>

<!-- Three line list  -->

<mat-list>
  <mat-list-item *ngFor ="let message of messages">
     <h3 matLine> {{message.from}} </h3>
     <p matLine>{{message.subject}}</p>
     <p > {{message.content}}</p>
  <mat-list-item>
<mat-list>

Angular Material Lists with icons

Use the matListIcon attribute for adding an icon to the list item.

<mat-list>
 <mat-list-item *ngFor ="let message of messages">
   <mat-icon matListIcon >file </mat-icon>
   <h3 matLine > {{ message.from }} </h3>
   <p matLine > 
    <span> {{  message.subject }} </span>
     <span>  {{  message.content }} </span>
  </p>
</mat-list-item>
<mat-list>

Angular Material Lists with avatars

<mat-list>
   <mat-list-item *ngFor ="let message of messages">
    <img matListAvatar   src="..." alt"..." >
    <h3 matLine> {{  message.from  }} </h3>
     <p matLine >
       <span> {{  message.subject  }}</span>
       <span> {{ message.content }} </span>
     </p>
  </mat-list-item>
<mat-list>

Angular Material Dense lists

Lists are also available in “dense layout” mode, which shrinks the font size and height of the list to suit UIs that may need to display more information. To enable this mode, add a dense attribute to the main mat-list tag.

<mat-list dense>
<mat-list-item> Hamburger</mat-list-item>
<mat-list-item> Chicken tikka masala</mat-list-item>
<mat-list-item>  Masala dosa </mat-list-item>
</mat-list>

Angular Material Lists with multiple sections

Subheader can be added to a list annotating a heading tag with an matSubheader attribute. To add a divider, use <mat-divider>.

app.module.ts

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

export interface Section {
  name: string;
  updated: Date;
}

/**
 * @title List with sections
 */
@Component({
  selector: 'list-sections-example',
  styleUrls: ['list-sections-example.css'],
  templateUrl: 'list-sections-example.html',
})
export class ListSectionsExample {
  folders: Section[] = [
    {
      name: 'Photos',
      updated: new Date('04/14/22'),
    },
    {
      name: 'Recipes',
      updated: new Date('4/17/22'),
    },
    {
      name: 'Work',
      updated: new Date('3/28/22'),
    },
  ];
  notes: Section[] = [
    {
      name: 'Vacation Itinerary',
      updated: new Date('3/20/22'),
    },
    {
      name: 'Kitchen Remodel',
      updated: new Date('4/18/22'),
    },
  ];
}

app.component.html

<mat-list [style.background]="'skyblue'">
   <h3 matSubheader>File</h3>
   <mat-list-item *ngFor ="let folder of folders">
    <mat-icon matListIcon> folder </mat-icon>
     <h4 matLine> {{ folder.name }} </h4>
     <p matLine> {{ folder.updated | date}}</p>
  </mat-list-item>

  <mat-divider></mat-divider>
   <h3  matSubheader> Notes </h3>
   <mat-list-item *ngFor ="let note of notes">
   <mat-icon matListIcon> note </mat-icon>
   <h4 matLine> {{ note.name }} </h4>
   <p matLine> {{ note.updated | date }}</p>
  </mat-list-item>
</mat-list>

Output :

And you will get output something like this.

Angular Material Lists with multiple sections

Example Source Code

I hope you like this amazing article.