71 Angular ng-if-else | Angular 2 ng-if else

Angular 2 :-

The “ngIf” evaluates expression and then renders the “else” or “then” template in its place when expression is “truthy” or “falsy” respectively.

Stayed Informed – Angular 4 vs. Angular 2

Then: - This template is the inline template of “ngIf” unless bound to a different value.
Else: - This template is blank unless it is bound.

Selectors: -
1.      ngIf
2.      ngIfThen
3.      ngIfElse

The syntax for the all above selectors as given below,

//Syntax for ngIf 
<div *ngIf="condition">...</div>
<div template="ngIf condition">...</div>
<ng-template [ngIf]="condition"><div>...</div></ng-template>

//Syntax for else block
<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

//Syntax for then and else block 
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>

Basic ngIf example as,
class NgIfSimple {
  show: boolean = true;

  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <div *ngIf="show">Click to show </div>

An alternative template using else as,
class NgIfElse {
  show: boolean = true;

  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <div *ngIf="show; else elseBlock">Click to show</div>
    <ng-template #elseBlock>Click to hidden</ng-template>

For Angular 1.x Example,

Angular “ng-if” directive in AngularJs is used to remove and reinsert portion HTML DOM element into a HTML template tree. This is executed based on the value of expression assigned to the “ng-if” attribute.

Now the question is – what is the difference between “ng-if” and “ng-show/ng-hide” then. Since they all do the same thing on the browser. Well, the difference is – the “ng-show/ng-hide” just do the display and hide of the HTML element by manipulation the display property of the CSS whereas the “ng-if” completely remove and recreate the HTML portion from the HTML DOM tree.

The below example is same example as the “ng-show” example; the change is just the attribute. We have replaced the “ng-switch” attribute by “ng-if”.

The same way we can understand the “ng-else-if” and “ng-else” as well. We can define the expression in the attribute and they will execute accordingly.


<!DOCTYPE html>
<html lang="en">
    <title>Angular Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script >
        var myApp = angular.module("AngularApp",['ngRoute']);
        myApp.controller('exampleController', function($scope) {
            $scope.textVal = "";
            $scope.isOK = function (param) {
                if(param == "show")
                    return true
                else if(param =="hide")
                    return false

<body ng-app="AngularApp">
<div ng-controller="exampleController">
    <label>Please enter show and hide to show hide the element below : </label><input ng-model = "textVal">
    <div ng-if="isOK(textVal)">The Div is displaying now</div>

The Result looks like,

About Blogger


Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...

    Blogger Comment
    Facebook Comment


  1. Great Post! It is very helpful post. Thank you.


SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book