The Angular 8 ngFor directive is used to repeat a portion of the HTML template once per each item from an iterable list (Collection). The ngFor is an Angular structural directive and is similar to ngRepeat in AngularJS. Some local variables like Index, First, Last, odd, and even are exported by ngFor directive.

In Angular 8, the ngFor directive is used for rendering a list of items in the template. It iterates over a collection (such as an array or an object) and generates a template for each item in the collection. This directive is commonly used in conjunction with an array of data retrieved from a component class or any other data source.

The basic syntax of ngFor is:

html

<element *ngFor="let item of items">

  <!-- template content -->

</element>

Here, items is the array or iterable object that contains the data to be iterated over, and item is a local variable representing each individual item in the collection.

For example, if you have an array of strings in your component class:

typescript

export class MyComponent {

  items: string[] = ['item1', 'item2', 'item3'];

}

You can use ngFor in your template to render each item:

html

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

  {{ item }}

</div>

This would generate:

html

<div>item1</div>

<div>item2</div>

<div>item3</div>

In summary, the ngFor directive in Angular 8 is used to iterate over a collection of items and generate dynamic content in the template based on each item in the collection.