Angular2 ngshow | AngularJs show hide | Angular2 ng show hide

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>
`
})

Stayed Informed - Angular 2 ng-show toggle button

For Angular 1 Examples,

The “ng-show” and “ng-hide” directive takes control of displaying HTML element on the browser. They will be shown and hidden on the browser depending on the value of their corresponding data model values.

In the below example the div is bind with ng-show directive that is dependent on the model state of isOK, if the value of this will be true then the div will be shown else it will be hidden.

The 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
                }
                else
                {
                    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-show="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