Working with Iterators in Angular (Similar Like DataList)

Create a new Component

>ng g c iteration

Screenshot

Go to iteration.ts and write the following static code

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

@Component({

  selector: 'app-iteration',

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

  styleUrls: ['./iteration.component.css']

})

export class IterationComponent {

public dataList= [ {category: 'Electronics', product : ['SamsungTV', 'Mobiles']},

{category: 'Shoes',product:['Nike Casual', 'Leo']}

];

}

Screenshot

.html code

<h2> Data List</h2>

<ol>

    <li *ngFor ="let item of dataList">

        {{item.category}}

        <ol type="o" >

            <li *ngFor="let product of item.product">

                {{product}}

            </li>

        </ol>

    </li>

</ol>

Screenshot

Make the following changes to appmodule.ts

Make the following changes to index.html

Output