ngIf in Angular 6

The *ngIf directive is most commonly used to conditionally show an inline template

The ngIf directive can be very useful in scenarios where you want to show a part of your Angular application UI

see my VDO on Shubh Techno Expert

https://youtu.be/eirevolrNYI

Content to render when condition is true.

Content to render when condition is

true.

----------------------------------------------------------------------------

Content to render when condition is true.

Content to render when condition is true.

True Condition Executed

False Condition Executed




-----------------------------------------------------------------------------

Content to render when condition is true.
Content to render when condition is false.


------------------------------------------------------------------------------

{{value}}

Content to render when value is null.

Customer.component.html

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

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

  constructor() { }

  ngOnInit() {
  }

  flag: boolean = false; 
 
  empcollection: any = [
    {name: "Raj", email:"Raj@gmail.com" ,Salary:2000},
    {name: "Sumit", email:"sumit@gmail.com",Salary:70000},
    {name: "Nagendra", email:"Nagendra@Gmail.com",Salary:8000},
    {name: "Manish", email:"Manish@Gmail.com",Salary:9000}
    ]

}

customer.components.ts

<h1 align="center">how to use ngIf<h2>

        <div>

            <h1>Employee</h1>

            <table border="2">

                <thead>

                    <th>Name</th>

                    <th>Email</th>

                    <th *ngIf="flag">Salary</th>

                    <th *ngIf="flag">Actions</th>

                </thead>

                <tbody>

                    <tr *ngFor="let e of empcollection">

                        <td>

                            {{e.name}}

                        </td>

                        <td>

                            {{e.email}}

                        </td>

                        <td *ngIf="flag">

                            {{e.Salary}}

                        </td>

                        <td *ngIf="flag">

                            <button>Delete</button>

                            <button>Update</button>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

        <table border="3">

            <th>Name</th>

            <th>Age</th>

            <tr *ngIf="false">

                <td>Amit</td>

                <td>12</td>

            </tr>

            <tr>

                <td>Rohit</td>

                <td>34</td>

            </tr>

            <tr *ngIf="true">

                <td>Deepak</td>

               <td>23</td>

            </tr>

        </table>

 

        

<div *ngIf="true; else loggedOut">

        Welcome friend.

      </div>

      

      <ng-template #loggedOut>

        Please friend, login.

      </ng-template>