HTML Code

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 angular material - How to

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styles: [` .iconStyle{ margin-right:8px; } `] }) export class AppComponent { message:string = ""; onDelete(){ this.message = "Delete action list item clicked."; } onRestore(){ this.message = "Restore action list item clicked."; } onDownload(){ this.message = "Download action list item clicked."; } onUpload(){ this.message = "Upload action list item clicked."; } } app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - Action list with button and icon </h2> <h3>{{message}}</h3> <mat-action-list> <button mat-list-item (click)="onDelete()"> <mat-icon class="iconStyle">delete</mat-icon>

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message:string = ""; onDelete(){ this.message = "Delete action list item clicked."; } onRestore(){ this.message = "Restore action list item clicked."; } onDownload(){ this.message = "Download action list item clicked."; } onUpload(){ this.message = "Upload action list item clicked."; } } app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - How to use Action List </h2> <h3>{{message}}</h3> <mat-action-list> <button mat-list-item (click)="onDelete()"> Delete </button> <button mat-list-item (click)="onRestore()"> Re

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors = ["Red","Green","Blue","Pink","Azure"]; message:string = ""; onClick(color:string){ this.message = color + " button clicked"; } } app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - Navigation list with button and icon </h2> <h3>{{message}}</h3> <mat-nav-list> <mat-list-item *ngFor="let color of colors"> <a matLine href="#"> {{color}} </a> <button mat-icon-button (click)="onClick(color)"> <mat-icon>check_circle</mat-icon> </button> </mat-li

app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - How to use Navigation List </h2> <mat-nav-list> <a mat-list-item href="#">Home</a> <a mat-list-item href="#">About</a> <a mat-list-item href="#">Service</a> <a mat-list-item href="#">Help</a> <a mat-list-item href="#">Contact</a> </mat-nav-list> app.module.ts [import] import { MatListModule } from '@angular/material/list' More Angular tutorials angular material - Tick interval with step in Slider angular material - How to invert Slider angular material - How to use Slider input event angular material - How to use Slide toggle angular material - How to change Slide toggle checked color angular material - How to use Badge with text angular material - How to change Badge position angular material

app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - How to use List dense layout mode </h2> <h3>List dense layout mode</h3> <mat-list dense> <mat-list-item>ASP.NET</mat-list-item> <mat-list-item>C#</mat-list-item> <mat-list-item>Swift</mat-list-item> <mat-list-item>Bash</mat-list-item> <mat-list-item>Shell</mat-list-item> </mat-list> <h3 style="margin-top:35px;"> List regular layout mode </h3> <mat-list> <mat-list-item>SQL</mat-list-item> <mat-list-item>Kotlin</mat-list-item> <mat-list-item>Java</mat-list-item> <mat-list-item>PHP</mat-list-item> <mat-list-item>GO</mat-list-item> </mat-list> app.module.ts [import] import { MatListModule } from '@angular/material/list' More Angular tutorials a

app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors = [ "Red", "Green", "Blue", "Yellow", "Black", "Magenta", "Pink" ]; } app.component.html <h2 style="padding-top:25px; padding-bottom:16px;"> Angular Material - How to generate List items from an array </h2> <mat-list *ngFor="let color of colors"> <mat-list-item> {{color}} </mat-list-item> </mat-list> app.module.ts [import] import { MatListModule } from '@angular/material/list' More Angular tutorials angular material - Tick interval with step in Slider angular material - How to use Slider input event angular material - How to use Slide toggle angular