Angular NgIf Else Then – NgIf with Observables and Async Pipe (Angular 6)

In the tutorial, we show how to use Angular NgIf directive to add or remove an element from the DOM by evaluating the expression and then renders the then or else template.

Related posts:
Angular 6 – NgFor Repeater Directive – Loop over a Collection

Technologies

  • Node.js – version v10.4.0
  • Angular – version 6
  • Visual Studio Code – version 1.24.0

Angular NgIf

Preparation

We create an Angular 6 project as below structure:

angular-6-ngif + project-structure

– Generate Angular Project:

angular-6-ngif + create-angular-6-project

– Generate NgIfComponent :

angular-6-ngif + create-ng-if-component

– Now, add selector tag app-ng-if of NgIf component to app.component.html.

NgIf Common Usage

Syntax:

- 
...
-
...

Practice :

-> Modify NgIfComponent class as below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template: `
Text to show
` }) export class NgIfComponent{ show:boolean = true; }

-> result:

angular-6-ngif + ngif-common-case

We got the same result if using [ngIf] syntax:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template: `
				
Text to show
` }) export class NgIfComponent{ show:boolean = true; }

If we change show:boolean = false then Angular will not render the text: ‘Text to show ‘.

NgIf Else

Angular provides the else statement to control the render flow inside a component’s template.

Syntax:

...
...

Practice:

-> Modify NgIfComponent class as below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template:   `
Text to show
Alternate text when show = false` }) export class NgIfComponent{ show:boolean = true; }

– When show = true , result:

angular-6-ngif + ngif-common-case

– When show = false, result:

angular-6-ngif + ngif-else-statement

We also can achieve above result with [ngIfElse] syntax:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template:     `
                  
Text to show
Alternate text when show =false
` }) export class NgIfComponent{ show:boolean = false; }
NgIf Then Else

Angular provides then statement that helps move initial *ngIf template, to outside of the binding element.

-> Syntax:

... ...

Practice:

-> Modify NgIfComponent class as below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template:   `
Text to show Alternate text when show = false ` }) export class NgIfComponent{ show:boolean = true; }

– When show = true , result:

angular-6-ngif + ngif-common-case

– When show = false, result:

angular-6-ngif + ngif-else-statement

We also can achieve above result with [ngIfThen] syntax:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template:   `
              
              
                  Text to show
              
              
                  Alternate text when show = false
              `
})
export class NgIfComponent{
  show:boolean = true;
}
NgIf with Observables and Async
Storing Value Locally

Syntax:

{{value}}
...

Practice:

-> Modify NgIfComponent class as below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-ng-if',
  template:    `
  • {{ customer | json }}
Alternate text when customers is undefined ` }) export class NgIfComponent{ CUSTOMERS: Customer[] = [ {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24}, {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18}, {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31} ]; } class Customer { id: number; firstname: string; lastname: string; age: number }

-> Result:

angular-6-ngif + store-value-locally

NgIf with Observables and Async
import { Component } from '@angular/core';

import { Observable, of } from 'rxjs';  

@Component({
  selector: 'app-ng-if',
  template:    `
  • {{ customer | json }}
Alternate text when customers is undefined ` }) export class NgIfComponent{ CUSTOMERS: Customer[] = [ {id: 1, firstname: 'Mary', lastname: 'Taylor', age: 24}, {id: 2, firstname: 'Peter', lastname: 'Smith', age: 18}, {id: 3, firstname: 'Lauren', lastname: 'Taylor', age: 31} ]; observableCustomers: Observable = of(this.CUSTOMERS); } class Customer { id: number; firstname: string; lastname: string; age: number }

SourceCode

How to run the below sourcecode:

1. Download Angular-6-NgFor.zip file -> Then extract it to Angular-6-NgFor folder.
2. Go to Angular-6-NgFor folder
3. Run the app by commandline: ng serve --open

-> Source Code:

Angular-6-NgIF



By grokonez | June 20, 2018.


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*