Angular Material list | Best five mat-list and item examples

This post covers an tutorials and examples on Angular material list

Angular material list is an container element used to wrap UI elements displayed inside it, Other UI elements can be wrapped with

  • Cards
  • Checkbox

Basic Material List UI component contains followings

  • List container - It is an required parent container for holding group of elements or list items
  • listitem - It contains list item as a child element

In this blog post, List out the various examples of usage of material list using angular material.

This posts doesn’t cover how to create an angular application, And it covers adding list code to angular application

Angular material list basic example

material list is an UI element to display list of objects in list container. matList is an selector used to display the material style of list in UI pages.

list related components are inbuilt in angular module in the form of ‘MatListModule’.

Import angular material list module

All you need to is import MatListModule module in your application. You can add import in your component, app.module.ts or shared common module. I am adding this module to app.module.ts file.

import { NgModule } from '@angular/core';
import {MatListModule} from '@angular/material/list';

  imports:      [ MatListModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
export class AppModule { }

Now application has access to following components and directives of MatListModule available in your components.

  • mat-list,matList selectors etc…
  • mat-action-list and mat-list-item components
  • matList directives

What is next step? We’ll look at some examples of how material list can be used.

material list basic example

We are going to create a basic lists elements in angular using mat-list component.

Here is a basic component

  • mat-list is an parent tag to make it list, configured role as list
  • It contains mat-list-item as a child, assign role with listitem


  Basic Material List

<mat-list role="list">
  <mat-list-item role="listitem">INDIA</mat-list-item>
  <mat-list-item role="listitem">USA</mat-list-item>
  <mat-list-item role="listitem">GERMANY</mat-list-item>
Angular material list example

Material list also provides navigation list , Navigation links are links which are clickable using anchor tags.

Angular template html component

  Basic Material Navigation List
  <a mat-list-item [href]="link.url" *ngFor="let link of links">
    {{ link.title }}

Angular typescript component

import { Component, OnInit } from "@angular/core";

  selector: "app-basic-list",
  templateUrl: "./basic-list.component.html",
  styleUrls: ["./basic-list.component.css"]
export class BasicListComponent implements OnInit {
  public links: Array<any> = [
    { title: "book1", url: "/basic" },
    { title: "book2", url: "/basic1" },
    { title: "book3", url: "/basic2" },
    { title: "book4", url: "/basic3 " }
  constructor() {}

  ngOnInit() {}


Angular material navigation list example

Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts