57 Best Advantages for Angular 5

Angular 4 and 5 NgIf and NgSwitch Examples

The Angular *NgIf directive is used when we wants to remove/display an elements from the DOM based on our condition.

If your condition is false [*ngIf='false'] the element the directive is attached to will be removed from DOM.

What Are the Difference Between [hidden] = 'false' and *ngIf = 'false'?
The [hidden] = ‘false’ is used to simply hides the elements but the *ngIf= ‘false’ is used to removes the element completely from the DOM when the condition is not true.

See the below examples – Used of Angular *NgIf
import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'ngif',
  template: `
      <h4>NgIf</h4>
      <ul *ngFor="let person of people">
        <li *ngIf="person.age <= 29">
          {{ person.name }} ({{ person.age }})
        </li>
      </ul>`
})
class NgIfComponent {

  people: any[] = [
    {
      "name": "Anil Singh",
      "age": 29
    },
    {
      "name": "Alok Singh",
      "age": 33
    },
    {
      "name": "Raju",
      "age": 28
    },
    {
      "name": "Dilip Singh",
      "age": 34
    },
    {
      "name": "Param Trip",
      "age": 32
    }
  ];
}

See the below examples – Used of Angular NgSwitch – *NgSwitchCase

import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'ngswitch',
  template: `<h4>NgSwitch</h4>
    <ul *ngFor="let person of people" [ngSwitch]="person.country">
      <li *ngSwitchCase="'IN'"
          class="text-success">
        {{ person.name }} ({{ person.country }})
      </li>
      <li *ngSwitchCase="'USA'"
          class="text-primary">
        {{ person.name }} ({{ person.country }})
      </li>
      <li *ngSwitchCase="'UK'"
          class="text-danger">
        {{ person.name }} ({{ person.country }})
      </li>
      <li *ngSwitchCase="'NP'"
          class="text-danger">
        {{ person.name }} ({{ person.country }})
      </li>
      <li *ngSwitchDefault
          class="text-warning">
        {{ person.name }} ({{ person.country }})
      </li>
    </ul>`
})

class NgSwitchComponent {

  people: any[] = [
    {
      "name": "Anil Singh",
      "age": 29,
       "country": 'IN'
    },
    {
      "name": "Alok Singh",
      "age": 33,
       "country": 'USA'
    },
    {
      "name": "Raju",
      "age": 28,
       "country": 'UK'
    },
    {
      "name": "Dilip Singh",
      "age": 34,
       "country": 'NP'
    },
    {
      "name": "Param Trip",
      "age": 32,
       "country": 'USA'
    }
  ];
}

AppComponent -
import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
@Component({
  selector: 'directives-app',
  template: `<ngswitch></ngswitch>
      <ngif></ngif>`
})

class AppComponent {
}

App Module - NgModule
@NgModule({
  imports: [BrowserModule],
  declarations: [
    NgIfComponent,
    NgSwitchComponent,
    AppComponent],
    bootstrap: [AppComponent]
})
class AppModule {
}



I hope you are enjoying with this post! Please share with you friends!! Thank you!!!
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.
^