*ngFor directive

• The ngFor directive is a structural directive in Angular that allows you to iterate through a collection, such as an array or a list, and generate dynamic HTML templates based on the elements in that collection. 
• It's a fundamental building block for creating dynamic and data-driven user interfaces.

Syntax:

*ngFor="let item of collection"

Example:

Step 1: Create an Angular project using Angular CLI.

ng new ng-for-example

Step 2: Create a new component message

ng g c animals

Step 3: Edit the 'animals.component.html' to use '*ngFor' :

<div>
  <h2>List of Animals</h2>
  <ul>
    <li *ngFor="let names of animals">{{names}}</li>
  </ul>
</div>

Step 4: Edit the 'animals.component.ts' to define the component's logic.

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

@Component({
  selector: 'app-animals',
  templateUrl: './animals.component.html',
  styleUrls: ['./animals.component.css']
})
export class AnimalsComponent implements OnInit {

  animals: string[] = ['Cat', 'Dog', 'Lion', 'Horse'];
  constructor() { }

  ngOnInit() {
  }

}

Step 5: Add the ‘<app-animals></app-animals>’ to the ‘app.component.html’ to include the ‘animals component’ in the main application.

<app-animals></app-animals>

Step 6: Now run or compile the application.

ng serve

You will see the result on http://localhost:4200