ng-if in angular 2

Angular js 1 ng-if is pretty straight forward to use. Let us check how it is in angular js 2.

html

 <div ng-if="showSelected">Hey I am in</div>

ng-if directive removes or adds portion of dom. If ng-if value is false then it won't show at all in the dom.

How it is in Angular js 2.

html

<div *ngIf="showSelected">Hey I am in</div>

There is no major changes for ng-if in angular js 2.

For template

<template [ngIf]="showSelected"><div>Hey I am in</div></template>  

Angular js 2 ngif behavior also same as angular js one except the syntax changes. It also removes or adds from dom depends on the status true/false, otherwise a clone of the element is added to the dom.

If interested please check component code as well.

@Component({
  selector: 'my-app',
  template: `<div>
           <button (click)="ShowButton()">Show Result</button>
           <button (click)="HideButton()">Hide Result</button>
           <div *ngIf="showSelected">Result Found</div>
        </div>`
})
export class AppComponent {
    showSelected : boolean;
    constructor(){
        this.showSelected = false;     
    }
    ShowButton(){
        this.showSelected = true;
    }
    HideButton(){
        this.showSelected = false;
    }
}

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2