{"flag":true,"single":true,"pageTitle":"ngFor directive, What is Directives, | Angular 15+","post":{"id":55,"user_id":"1","slug":"what-is-directives-ngfor-directive-angular-15--6sus","title":"ngFor directive, What is Directives, | Angular 15+","body":"

Directives are simply an instruction to the DOM. what component add to html page, which show which hide is purpose of directive.<\/p>\r\n

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

products.component.html<\/strong><\/p>\r\n

<div class=\"col-sm-4\" *ngFor=\"let item of [1,2,3,5]\">\r\n\t<p>products! {{item}}<\/p>\r\n<\/div><\/code><\/pre>\r\n
products.component.ts<\/strong><\/p>\r\n
export class ProductsComponent {\r\n\r\n}<\/code><\/pre>\r\n
 <\/p>\r\n
pass products from component to view:<\/strong><\/p>\r\n
products.component.ts<\/strong><\/p>\r\n
export class ProductsComponent {\r\n  productis =[\r\n    {\r\n      \"id\": 1,\r\n      \"title\": \"iPhone 9\",\r\n      \"thumbnail\": \"https:\/\/i.dummyjson.com\/data\/products\/1\/thumbnail.jpg\",\r\n    },\r\n    {\r\n      \"id\": 2,\r\n      \"title\": \"iPhone X\",\r\n      \"thumbnail\": \"https:\/\/i.dummyjson.com\/data\/products\/2\/thumbnail.jpg\"\r\n    }]\r\n  constructor() {\r\n    console.log(this.productis);\r\n  }\r\n}<\/code><\/pre>\r\n
products.component.html<\/strong><\/p>\r\n
<div class=\"col-sm-4\" *ngFor=\"let item of productis\">\r\n\t<p>products! {{item.title}}<\/p>\r\n\t<img [src]=item.thumbnail>\r\n<\/div><\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-27T05:58:59.000000Z","updated_at":"2023-03-31T02:32:40.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Directives are simply an instruction to the DOM. what component add to html page, which show which hide is purpose of directive. Types of Di - ngFor directive, What is Directives, | Angular 15+ (Updated: March 31, 2023) - Read more about ngFor directive, What is Directives, | Angular 15+ at my programming site [SITE]","categories":[]}