Welcome Guest! (App Version 3.1)

websitnero logo name

*ngIf

Usage of *ngIf

ngIf directives contains an expression infront of the directive which is calculated in boolean. If the value ends true the tempate is rendered in dom, otherwise not. It is important to remember ngIf doesn't just hides and shows an html element -- It works on dom and either attaches element or completely removes it.

Practical Examples of [ngSwitch]

Please follow the mentioned steps:

  1. Create a compennt named 'home'
  2. Add the home component in the app.component.html file removing all boilerplate code there.
  3. Create an Array for Students in logic file (.ts) along with data containing - name, country, age of 5 people. We will use *ngIf conditionally for this data. Also, add a variable named 'someNumber' which we will use to demonstrate *ngIf additionally.
  4. As, we will use [(ngModel)] directive, addtionally add FormsModule in the app.module.ts file and also refer it in the imports array.

home.component.html


<ul>
  <li *ngFor="let x of students">{{x.name}}, {{x.country}}, {{x.age}}</li>
</ul>

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  someNumber: Number = 5;

  students = [
    {name: 'Robert', country: 'USA', age: 27},
    {name: 'Lily', country: 'UK', age: 17},
    {name: 'Jacob', country: 'USA', age: 19},
    {name: 'Rose', country: 'Canada', age: 31},
    {name: 'Gilbert', country: 'China', age:47}
  ];

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. You'll get the following result.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.