Angular Material list | Best mat-list and item examples


This post covers Angular material list tutorial and examples.

The Angular material list is a container element for UI elements that have been displayed inside it. Following UI components can also be wrapped with it.

  • Cards
  • Checkbox

Basic Material List UI component contains followings

  • List container is an required parent container for holding group of elements or list items
  • listitem 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 material 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';

@NgModule({
  imports:      [ MatListModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  providers:[],
  exports:[]
})
export class AppModule { }

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

  • 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-list.component.html

<h3>
  Basic Material List
</h3>

<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>
</mat-list>
Angular material list example

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

Angular template html component

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

Angular typescript component

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

@Component({
  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() {}
}

Output: Angular material navigation list example

Conclusion

You learned basic example of Angular material list with cards and checkbox

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

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.