Angular Material List

Angular material provides a number of components for laying out elements, let's begin with the list component in this article, let's see how to work with angular material list.

Angular Material List: Importing and Implementing

In material.module.ts import MatListModule from @angular/material and add it to the MaterialComponents array.

import { MatListModule } from "@angular/material";

const MaterialComponents = [
  MatListModule
];

In the HTML we can create a basic list using <mat-list> as a component and this component has <mat-list-item> as its child.

<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>

Angular Material List If you save this and take a look at the browser you can see that we have a list of items being displayed, now suppose we have a list where the list item is just a lot of text for such scenarios we the dense attribute to apply on mat-list component and it will reduce the font size.

<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>

Angular Material List Item

You can see that the font size has been reduced the MatListModule also provides components to create a navigation list the component is mat-nav-list as children to this component you have to specify anchor tags with the mat-list-item attribute.

<mat-nav-list>
  <a href="#" mat-list-item>Home</a>
  <a href="#" mat-list-item>About</a>
  <a href="#" mat-list-item>Contact</a>
</mat-nav-list>

If you save the file and take a look you'll see that we have a navigation list a good place for this would be the Sidenav component which we learned earlier in this course.

Angular Material List: Multi-line and Icon

It's also possible to create multi-line list and also include material icons, so let's start a new list with <mat-list> component within this component we're going to have a <mat-list-item> within this component we can add a material icon using <mat-icon> with a matListIcon attribute, we can then add a heading with matLine attribute after that a paragraph with a matLine attribute also.

<mat-list>
  <mat-list-item>
    <mat-icon matListIcon>home</mat-icon>
    <h3 matLine>Heading</h3>
    <p matLine>Line</p>
  </mat-list-item>
</mat-list>

Save the file and take a look at the browser. List Multi-line and Icon You can see that the list item has two lines one for Heading and one for the Paragraph we also have the icon on the left of the item list, let us add another list item.

<mat-list>
  <mat-list-item>
    <mat-icon matListIcon>home</mat-icon>
    <h3 matLine>Heading 1</h3>
    <p matLine>Line 1</p>
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine>Heading 2</h3>
    <p matLine>Line 2</p>
  </mat-list-item>
</mat-list>

angular material with multiple lines You can see that we have a list with two items which contain multiple lines.

If you want add a clear distinction between the list items you can make use of MatDividerModule that angular material provides so in material.module.ts import that module and add it to the MaterialComponents array.

import { MatDividerModule } from "@angular/material";

const MaterialComponents = [
  MatDividerModule
];

Now in the HTML in between the two list items we can add the <mat-divider> component right after the first list item.

<mat-list>
  <mat-list-item>
    <mat-icon matListIcon>home</mat-icon>
    <h3 matLine>Heading 1</h3>
    <p matLine>Line 1</p>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine>Heading 2</h3>
    <p matLine>Line 2</p>
  </mat-list-item>
</mat-list>

mat-divider

You can see that there is a clear separation between the list items.

Right now we have the list items hard-coded but typically you would use the *ngFor directive on an array of data. So in order to create list in angular material you can use mat-list and mat-divider components.