Working with Iterators(Render List in Data Definition)

Create a new Component

ng g c iterationDataDefinationcls

ScreenShot

Goto iteration-data-definationcls.component.ts file and write the below code

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

@Component({

  selector: 'app-iteration-data-definationcls',

  templateUrl: './iteration-data-definationcls.component.html',

  styleUrls: ['./iteration-data-definationcls.component.css']

})

export class IterationDataDefinationclsComponent {

public topics= [

  {Title: 'Angular JS' ,Description : 'It is a client Side Framework'},

  {Title: 'Angular' ,Description : 'It is a client Side PlatForm'},

]

}

ScreenShot

.html code changes

<h2> Table of Contents</h2>

<dl>

    <div *ngFor="let item of topics">

        <dl> {{ item.Title }} </dl>

        <dl> {{ item.Description }}</dl>

    </div>

</dl>

ScreenShot

appmodule.ts

Index.html

Output