NgIf for Angular Novices

Kagula

Mar-8-2023

Introduction

        Introduce the Ngif of Angular by examples.

Environment

• Visual Studio Community 2022 (Version 17.5.1)
• Angular CLI: 15.2.1
• Node: 18.14.2
• Package Manager: npm 9.5.0
• OS: win32 x64

Content

Step 1: New project and prepare

        omit...

Step 2: Modify the file app.module.ts

        Importing FormsModule to the app.module.ts file.

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Modify the file app.component.ts

        Add the variable strSearch and function handleChange to support the example.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngIf Example';

  strSearch: string = '';

  handleChange(event:any) {
    this.strSearch = event.target.value;
  }
}

Step 4: Modify the file app.component.html

<div>
  <h1>{{ title }} app is running!</h1>
  <br />

  <!-- [value]="XX" only download the value of XX from backend. -->
  <input type="text" [value]="strSearch" (input)="handleChange($event)" />
  <p>{{ strSearch }}</p>

  <!-- It's like if(XX) then YY -->
  <div *ngIf="!strSearch">
    The variable strSearch is empty!
  </div>


  <!-- It's like if(XX) then YY else ZZ -->
  <ng-container *ngIf="strSearch.length; then dataList; else noData">
  </ng-container>

  <ng-template #dataList>
    <h2>The data is available.</h2>
  </ng-template>

  <ng-template #noData>
    <h2>The data is unavailable.</h2>
  </ng-template>
</div>

Last Step: Run

Pic1. No Data

 Pic2. Data Exist

Reference

• <<Angular For Beginners - 6. NgIf>> Teddy Smith