Angular Material List Example
April 06, 2021
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';
Contents
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
Themat-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
Themat-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
Themat-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
Themat-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
Themat-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>
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>
isSelected = true;
onListSelectionChange(ob: MatSelectionListChange) {
console.log("Selected Item: " + ob.source.selectedOptions.selected.length);
}
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>
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);
}
}
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.
