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

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

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 Tech Blog - https://www.code-sample.com/ My Books - Book 1 and Book 2