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
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

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