Skip to main content

angular material - How to use Selection List

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  languages = [
    "JavaScript","HTML","CSS","Kotlin",
    "Python","SQL","Java","C#"
  ];
}
app.component.html 

<h2 style="padding-top:25px; padding-bottom:16px;">
  Angular Material - How to use Selection List
</h2>

<h3>
  Selected {{list.selectedOptions.selected.length}} language(s)
</h3>


<mat-selection-list #list>
  <mat-list-option *ngFor="let language of languages">
    {{language}}
  </mat-list-option>
</mat-selection-list>
app.module.ts [import] 

import { MatListModule } from '@angular/material/list'
More Angular tutorials
Labels: