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">
  <h3>{{msg}}</h3>
</div>

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

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

@Component({
  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';
  onButtonClick(){
    if(this.isGreet){
      this.isGreet = false;
    } else{
      this.isGreet = true;
    }
   }
}

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