Angular 2 ng if else expression

Angular2 ngif else | Angular 2 ng-if else | ng-if else

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 2 Interview Q/A

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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.