ngIf Directive

  • ngIF is a Structural directive
  • This means it changes the structure of the dom using it hence its always represented with a * (start) ahead of it
  • Create a new Angular Project using CLI, and make changes to app.component.html as below :
<H1>Greet User</H1>
<button (click)="onButtonClick()">Greet</button>
<div *ngIf="isGreet">

Make Changes to the app.component.ts as below :

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'ngIfDemo';
  isGreet: boolean = false;
  msg: string = 'Hi! , Greetings fellow viewer';
      this.isGreet = false;
    } else{
      this.isGreet = true;

And the output looks like below : On button toggle the text is displayed.

Leave a Comment