Angular 2 :-
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> ` })
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,
Blogger Comment
Facebook Comment