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;
}

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

An alternative template using else as,

class NgIfElse {
  show: boolean = true;
}

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <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.

Example,

<!DOCTYPE html>
<html lang="en">
<head>
    <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
                }
            }
        });
    </script>
</head>

<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>
</div>
</body>
</html>

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...
http://www.code-sample.com
http://www.code-sample.xyz