Expert Angular

ngFor directive

The ngFor directive will help us iterate the items and append them to the list on the fly.

We need to declare an array in the StructureDirectiveComponent class, and then use ngFor to loop the values and display them in the template.

The list <li> elements get appended on the fly to the <ul> element.

The following is the component snippet for the ngFor directive usage:

import {Component} from '@angular/core';@Component({   selector: 'my-app',   template: `    <h4>{{title}}</h4>    <strong>Using ngFor directive</strong>   <ul><li *ngFor="let language of languages">{{ language.name }}</li></ul>   ` })export class StructureDirectiveComponent {  title = 'Structural Directives';  public languages = [  { name: "PHP"},  { name: "JavaScript"},