Skip to main content

angular material - How to generate List items from array

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
Labels: