Angular 2 :-
The “ngIf” evaluates expression and then renders the “else” or “then” template in its place when expression is “truthy” or “falsy” respectively.
Basic ngIf example as,
An alternative template using else as,
Stayed Informed - Angular 2 ng-show toggle button
The example,
The Result looks like,
The “ngIf” evaluates expression and then renders the “else” or “then” template in its place when expression is “truthy” or “falsy” respectively.
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,
Blogger Comment
Facebook Comment