Angular Material Selection List Example | Angular mat-selection-list

Here, i will show you angular material selection list example. you can understand a concept of angular material mat-selection-list example. it's simple example of angular material list example. you can see mat-selection-list angular material.

Angular Material List component will provide a wraps and formats a series of line items. we can use list using mat-list, mat-list-item, mat-nav-list, mat-action-list, mat-selection-list etc element.

Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications for creating selection list, expansion panel, divider, card, badge, forms, steps, menu etc. In this example we will learn how to use angular selection list.

I will show you how to use material selection list ui in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17. i will give you very basic example of angular material design selection list so you can use in your application.

I will give you list of examples:

1) Angular Material List Example

2) Angular Material Selection List Example

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new newMat

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Import Material List Module

Here, we will simply import MatListModule and BrowserAnimationsModule module for creating very simple example. so let's import on module.ts file.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatListModule} from '@angular/material/list';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example 1: Angular Material List Example

we will use matBadge for creating List in angular app. so let's update follow html file.

src/app/app.component.html

<h1>Angular Material List Example - ItSolutionStuff.com</h1>
   
<mat-list role="list">
  <mat-list-item role="listitem">Item 1</mat-list-item>
  <mat-list-item role="listitem">Item 2</mat-list-item>
  <mat-list-item role="listitem">Item 3</mat-list-item>
  <mat-list-item role="listitem">Item 4</mat-list-item>
  <mat-list-item role="listitem">Item 5</mat-list-item>
</mat-list>

Now you can see layout as like bellow:

Example 2: Angular Material Selection List Example

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newMat';
     
  categories: string[] = ['Angular', 'Vue', 'React', 'PHP', 'Laravel'];
}

src/app/app.component.html

<h1>Angular Material List Example - ItSolutionStuff.com</h1>
  
<mat-selection-list #cats>
  <mat-list-option *ngFor="let cat of categories">
    {{cat}}
  </mat-list-option>
</mat-selection-list>
  
<p>
  Options selected: {{cats.selectedOptions.selected.length}}
</p>

Now you can see layout as like bellow:

Now you can run by bellow command:

ng serve

I hope it can help you...