Session 20: ngIf Directives In Angular

ngIf Directives

* ngIf is one of structural directive we do have which takes Boolean expression and appear or disappears a DOM element. 

* This directive not hides the element like CSS does instead it removes physically the element from DOM.

Why Remove Instead Hide 

* The difference between remove & hide doesn’t matter for a paragraph but it really does matter when the host element associated to an intensive component. The behaviour of hosted element still continues which retains in DOM. 

* In result to that it consumes the memory space and listens the events and executes its processing and it causes a slight performance issue too. 

* On positive side, it reloads to DOM quickly and also preserved state can be retained..

What asterisk (*) prefix does

* The asterisk (*) prefix is just a syntactical representation but actually does a bit more things. 

* It translates internally from *ngIf to <ng-template> element, wrapped around host element.

* ngIf turns into a property within <ng-template> directive which encloses the hosted element with in it and based on condition satisfies it renders the portion.

app.component.ts

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

import { IDropdownItem } from './Model/idropdown-item';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  isVisible: boolean = true;

};

app.component.html

<div>

  <div *ngIf="isVisible">Dispaly Section</div>

</div>