How to implement angular material list in Angular 12 .?

We have made series of tutorials on Angular material components and in the article, we will explore how to implement Angular material list.

Angular lists allow the developer to group a set of related items in lists. The angular material list is made up of multiple rows of items that can contain buttons, text, icons, toggles, thumbnails, and much more. Angular lists generally contain items with similar data content, such as images and text. 

Angular Materials provide the developer with reusable UI components that help the developer to use ready-made components, fast development, and one best UI design.

In this article, we’ll learn how to use the Angular material list and explore different child components we can use inside the Angular material list and we had demonstrated a few examples of lists with images, a list with icons, avatars,s, and more. Let get started.

Angular material list example
Angular material list example

Step 1 : Setup and configure Angular material list project

Let first create an Angular material list project, we need to install the angular material library and we don’t have any dependency on another library. Let’s create and install the angular material library.

ng new listMaterialApp
cd listMaterialApp
ng add @angular/material

While running the 3rd command will ask you the select theme, material typography, and animation, press yes on all. To use the Angular material component, we have to import it into our app module. Let create a module and import all material components on it.

ng g m ng-material
Angular material card example

Open src/app/ng-material/ng-material.module.ts and replace the existing code with the code shown below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        MatButtonModule,
        MatIconModule,
        MatListModule,
        MatIconModule,
    ],
    exports: [
        CommonModule,
        MatButtonModule,
        MatListModule,
        MatIconModule,
    ]
})
export class NgMaterialModule { }

We are importing all the required modules in our custom material module file and keeping separate modules for Angular material will make the application easy to maintain. Now we need to import our material module in the src/app/app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { NgMaterialModule } from './ng-material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    NgMaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

To demonstrate the material list we need dummy data, create folder data in assets and countries.json file and add the following dummy data.

[
    {
        "name": "France",
        "flag": "c/c3/Flag_of_France.svg",
        "area": 640679,
        "population": 64979548,
        "description": "France, the largest country in Western Europe, has long been a gateway between the continent's northern and southern regions."
    },
    {
        "name": "India",
        "flag": "4/41/Flag_of_India.svg",
        "area": 3287263,
        "population": 1324171354,
        "description": "India (Hindi: Bhārat), officially the Republic of India (Hindi: Bhārat Gaṇarājya) is a country in South Asia."
    },
    {
        "name": "Germany",
        "flag": "b/ba/Flag_of_Germany.svg",
        "area": 357114,
        "population": 82114224,
        "description": "Germany is a country located in the heart of Western Europe."
    }
]

We also need a model for our country to make strict types in our angular project. Create folder model and country.model.ts file and add the following code.

export interface ICountry {
    name: string;
    flag: string;
    area: number;
    population: number;
    description: string;
}

Step 2 : An Example of Angular material list

We have completed the material configuration, let us demonstrate our first example that we have all components and directives need for creating an Angular material list. Here is a screenshot of our first example.

Angular material list with avatar

In the above image, we have used a material list component with material list item component and matListAvatar and matLine directives. All these components and directives are part of the Angular material list module and we have listed all.

NameDescription
mat-listmat-list is a container or root component for all items in the list. As the base list component, it provides Material Design styling, but no behavior of its own.
mat-action-listWe can use mat-list or mat-action-list or mat-nav-list as the root components of the list. As the base list component, it provides Material Design styling, but no behavior of its own.
mat-nav-listWe can use mat-list or mat-action-list or mat-nav-list as the root components of the list. We can add a navigation link inside the nav list item.
mat-list-itemIndividual item in the list, it can contain our element like image, div, paragraph, video and more.
mat-list-itemIndividual item in the list, it can contain our element like image, div, paragraph, video and more.
matLineFor lists that require multiple lines per item, annotate each line with an attribute or directive.
matListAvatarThis directive show image in avatar format.

We had learned all material list components, now let create a material list containing Angular material list avatar. Edit the app.component.ts file to fetch our dummy data.

import { Component } from '@angular/core';
import { ICountry } from './model/country.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  countries: ICountry[] = [];

  constructor() { }

  ngOnInit(): void {
    fetch('./assets/data/countries.json').then(res => res.json())
      .then(json => {
        this.countries = json;
      });
  }
}

Edit app component template, to add a material list.

<div class="container">
  <h2>Angular material list example</h2>
  <mat-list>
    <mat-list-item *ngFor="let country of countries">
       <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" matListAvatar alt="">
        <div matLine>{{ country.name }}</div>
         <div matLine>Population: {{ country.population }}</div>
          <div matLine>Area : {{ country.area }}</div>
      <div matLine>{{ country.description }}</div>
    </mat-list-item>
  </mat-list>
</div>

Angular material action list : Angular material navigation list

In our example one, we only show the list of items, it doesn’t have any action. If the user once navigates or clicks, the hover action will highlight the corresponding item in the list. We can add an angular material navigation list in the mat-action list.

angular material navigation list

We have used the same countries array object, let add a material action list containing anchor tag to navigate to another component.

  <h2>Angular material action list</h2>
  <mat-action-list>
    <mat-list-item *ngFor="let country of countries">
      <img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag" matListAvatar alt={{country.name}}>
      <a mat-list-item routerLink="#">{{ country.name }}</a>
    </mat-list-item>
  </mat-action-list>

Instead of mat-action-list, we can use the mat-nat-list component, to add links or buttons inside our list.

  <mat-nav-list>
    <mat-list-item *ngFor="let country of countries">
      <a matLine routerLink="#">{{ country.name }}</a>
      <button mat-icon-button (click)="showInfo(country)">
        <mat-icon>Info</mat-icon>
      </button>
    </mat-list-item>
  </mat-nav-list>

Angular materila selection list

We can also have a selection of items in a list like a checkbox element of HTML. Here we have a screenshot of the Angular material selection list.

Angular material list

We have an array object containing a list of framwork and add framework array object in our component.

  // In typescript
framworks: any = [
    { name: "Angular", selected: false },
    { name: "Reactjs", selected: true },
    { name: "Vue", selected: false },
    { name: "Ionic", selected: false }
  ];

// In component template let add
  <mat-selection-list (selectionChange)="onSelectionChange($event)" class="list">
    <mat-list-option *ngFor="let framwork of framworks" 
      [selected]="framwork.selected" disabled="false"
      [value]="framwork.name">
      {{ framwork.name }}
    </mat-list-option>
  </mat-selection-list>

Angular material containing list of material icon

We have a material list containing a list of material icons and apply different colors for each icon in the material list. Let add iconList array object containing material icon name and color.

Angular material icon list
  iconList: any = [
    {
      name: 'Sailing Icon',
      icon: 'sailing',
      color: 'blue-icon'
    },
    {
      name: 'Video Call Icon',
      icon: 'video_call',
      color: 'orange-icon'
    },
    {
      name: 'Emoji nature Icon',
      icon: 'emoji_nature',
      color: 'green-icon'
    },
    {
      name: 'Vpn lock Icon',
      icon: 'vpn_lock',
      color: 'red-icon'
    },
  ];

In our app component template let iterate through the list to demonstrate material icon items.

  <mat-nav-list>
    <mat-list-item *ngFor="let item of iconList">
      <mat-icon [class]="item.color">{{ item.icon }}</mat-icon>
      <span>{{ item.name }}</span>
    </mat-list-item>
  </mat-nav-list>

To apply color for each material icon we have to add CSS style for it.

.container {
    .blue-icon {
        color: blue;
    }
    .orange-icon {
        color:orange;
    }
    .green-icon {
        color: green;
    }
    .red-icon {
        color: red;
    }
}

Conclusion
We have completed our Angular material list containing its components and directives. I hope you have got some idea of how to use the Angular material list. We have articles on how to add Angular material card list, I have tried to add cards in the material list mat-list component but it didn’t work well, instead, you iterate material card directly.

Related Articles

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top