Nested ngFor example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Nested-ngFor-example-in-angular --style=scss --routing --skip-install

cd Nested-ngFor-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  prop = [{name:'test 1', values:[1,2,3,4,5]},{name:'test 2', values:[5,6,7]},

{name:'test 3', values:[1,2,3,4]}];

}

Open app.component.html file and update code as below

<h1>Nested ngFor example in angular</h1>

 

  <div *ngFor="let list of prop">

    <div><b>{{list.name}}</b></div>

    <div *ngFor="let item of list.values">

      value is :   {{item}}  

    </div>

  </div>

Output: