ngFor directive, What is Directives, | Angular 15+

Directives are simply an instruction to the DOM. what component add to html page, which show which hide is purpose of directive.

Types of Directive?
Structural directive: Changes the view of a webpage by adding or removing DOM elements from a webpage.
Attribute Directive: Used like an attribute on a existing webpage element to change its look and behaviour

products.component.html

<div class="col-sm-4" *ngFor="let item of [1,2,3,5]">
	<p>products! {{item}}</p>
</div>

products.component.ts

export class ProductsComponent {

}

pass products from component to view:

products.component.ts

export class ProductsComponent {
  productis =[
    {
      "id": 1,
      "title": "iPhone 9",
      "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
    },
    {
      "id": 2,
      "title": "iPhone X",
      "thumbnail": "https://i.dummyjson.com/data/products/2/thumbnail.jpg"
    }]
  constructor() {
    console.log(this.productis);
  }
}

products.component.html

<div class="col-sm-4" *ngFor="let item of productis">
	<p>products! {{item.title}}</p>
	<img [src]=item.thumbnail>
</div>