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.

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.

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.

I hope you like this amazing article.
Also read :
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- Template Reference Variables(#var) in Angular
- How to convert string to number in javascript or typescript
- How to get names and values of enum in typescript
- Different ways to read Local JSON file in Angular with example
- Best websites to learn angular
mistakes are proof that you are trying