python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions