{"flag":true,"single":true,"pageTitle":"ngIf Directive in Angular | Directives | Angular 15+","post":{"id":57,"user_id":"1","slug":"ngif-directive-in-angular-directives-angular-15--fwkm","title":"ngIf Directive in Angular | Directives | Angular 15+","body":"<p>The ngIf is a structural directive.&nbsp;The ngIf directive is used to add or remove element from a webpage&nbsp;based on a given condition.<br>If the condition assigned to ngIf returns true, it will add the element on&nbsp;which it is used to the webpage. Otherwise, if the condition returnsfalse, it will remove that element from the webpage<\/p>\r\n<p><strong>search.component.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>export class ProductsComponent {\r\n    variableis:any=\"red\"\r\n}<\/code><\/pre>\r\n<p><strong>search.component.html<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div *ngIf=\"variableis=='red'\"&gt;show this if variableis only red&lt;\/div&gt;<\/code><\/pre>\r\n<p>&nbsp;<\/p>","category_id":"13","is_private":"0","created_at":"2023-03-27T06:14:11.000000Z","updated_at":"2023-03-27T06:14:11.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":"The ngIf is a structural directive.&nbsp;The ngIf directive is used to add or remove element from a webpage&nbsp;based on a given condition. - ngIf Directive in Angular | Directives | Angular 15+ (Updated: March 27, 2023) - Read more about ngIf Directive in Angular | Directives | Angular 15+ at my programming site [SITE]","categories":[]}