Home  >  Angular  >  Angular Material

Angular Material List Example

By Arvind Rai, April 06, 2021
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.
To work with Material List we need to import MatListModule in application module.
import { MatListModule } from '@angular/material/list'; 
Here on this page we will discuss creating Material List with examples.


Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

mat-list

The mat-list is the selector of MatList directive. The mat-list is the base container component for list items. The properties of mat-list are as follows.
disableRipple: Boolean value to enable/disable ripple.
disabled: Boolean value to enable/disable list.

mat-list-item

The mat-list-item is the selector of MatListItem directive. The mat-list-item creates an item within a Material design list. Find the properties of mat-list-item.
disableRipple: Boolean value to enable/disable ripple for the list item.
disabled: Boolean value to enable/disable the list item.

mat-nav-list

The mat-nav-list is the selector of MatNavList directive. The mat-nav-list contains mat-list-item. The mat-nav-list is used to create navigation list. Find the properties of mat-nav-list.
disableRipple: Boolean value to enable/disable ripple.
disabled: Boolean value to enable/disable list.

mat-selection-list

The mat-selection-list is the selector of MatSelectionList directive. The mat-selection-list creates a list where each item is selectable option. For each item there will be a checkbox to select it. Find the properties of mat-selection-list.
color: Theme color of the selection list. This color will be applicable to all checkbox of list options.
disableRipple: Boolean value to enable/disable ripple.
disabled: Boolean value to enable/disable selection list.
multiple: Boolean value to enable/disable multiple selections. If the value of multiple property is false, then only single selection can be done. By default, multiple selection can be done.
compareWith: (o1: any, o2: any): The function used for comparing an option against selected value to determine which option should appear as selected.
selectionChange: Event that emits whenever the selected state of an option changes.

mat-list-option

The mat-list-option is the selector of MatListOption directive. The mat-list-option creates list option within a selection list. The mat-list-option is used within mat-selection-list. Find the properties of mat-list-option.
checkboxPosition: Position of checkbox against label. Values can be 'before' and 'after'. The default is 'after'.
color: Theme color of the checkbox of list option.
disableRipple: Boolean value to enable/disable ripple.
disabled: Boolean value to enable/disable list option.
selected: Boolean value to display list option selected.
value: Value of the list option.

Using mat-list and mat-list-item

Find the sample code using mat-list and mat-list-item.
<mat-list>
  <mat-list-item>Suresh</mat-list-item>
  <mat-list-item>Mahesh</mat-list-item>
  <mat-list-item>Krishna</mat-list-item>
</mat-list> 

Using mat-nav-list and mat-list-item

Find the sample code using mat-nav-list and mat-list-item with anchor tag.
<mat-nav-list>
  <a mat-list-item href="https://www.concretepage.com/java/java-8/" > Java </a>
  <a mat-list-item href="https://www.concretepage.com/angular/" > Angular </a>
</mat-nav-list> 
Find the code using mat-icon.
<mat-nav-list>
  <a mat-list-item href="http://linktest1.com" > 
    <mat-icon>book</mat-icon>
  </a>
  <a mat-list-item href="http://linktest2.com" > 
    <mat-icon>cloud</mat-icon> 
  </a>
</mat-nav-list> 

Using mat-selection-list and mat-list-option

Find the sample code using mat-selection-list and mat-list-option.
<mat-selection-list color="primary" (selectionChange)="onListSelectionChange($event)">
  <mat-list-option>Murdeshwar</mat-list-option>
  <mat-list-option [selected]="isSelected">Varanasi</mat-list-option>
  <mat-list-option disabled="true">Noida</mat-list-option>
  <mat-list-option>Bhopal</mat-list-option>
</mat-selection-list> 
Find the component code.
isSelected = true;
onListSelectionChange(ob: MatSelectionListChange) {
     console.log("Selected Item: " + ob.source.selectedOptions.selected.length);
} 
The MatSelectionListChange can be imported as below.
import { MatSelectionListChange } from '@angular/material/list'; 

Complete Example

app.component.html
<h3>mat-list and mat-list-item</h3>
<mat-list>
  <mat-list-item>Suresh</mat-list-item>
  <mat-list-item>Mahesh</mat-list-item>
  <mat-list-item>Krishna</mat-list-item>
</mat-list>
<h3>mat-nav-list and mat-list-item</h3>
<mat-nav-list>
  <a mat-list-item href="http://linktest1.com" > 
    <mat-icon>book</mat-icon>
  </a>
  <a mat-list-item href="http://linktest2.com" > 
    <mat-icon>cloud</mat-icon> 
  </a>
</mat-nav-list>
<h3>mat-selection-list and mat-list-option</h3>
<form [formGroup]="techForm" (ngSubmit)="onFormSubmit()">
  <mat-selection-list formControlName="selectedTech">
    <mat-list-option *ngFor="let tech of techList" [value]="tech">
      {{tech.lang}}
    </mat-list-option>
  </mat-selection-list>
  <button mat-raised-button color="warn">Submit</button>
</form> 
app.component.ts
import {Component} from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  techList = [
    {id: 101, lang: 'Java'},
    {id: 102, lang: 'Angular'},
    {id: 103, lang: 'Hibernate'}
  ];
  constructor(private formBuilder: FormBuilder) { }
  techForm = this.formBuilder.group({
    selectedTech: ''
  });
  onFormSubmit() {
    console.log(this.techForm.get('selectedTech').value);
  }
} 
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatListModule,
    MatIconModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
Angular Material List Example

Reference

Angular Material List

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI








©2021 concretepage.com | Privacy Policy | Contact Us