Angular 7|8 ngIf, ngIf else, ngIf then Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

<< Back to Angular Tutorial

In this tutorial, I show you how to use Angular 8 ngIf directive with lots of examples. We also see the ngIf, ngIf else, ngIf then examples.

We can use ngIf directive to show or hide parts of our angular application.

Check out Angular 7|8 ngFor Example tutorial

Video

This tutorial has explained in below video tutorial on YouTube. Subscribe to our youtube channel for future video updates.

NgIf Directive

From official documentation - ngIf is a structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause. The default template for the else clause is blank.

In the previous tutorial, we have developed an Angular 8 App using Angular 8 Hello World Example Tutorial and we will continue using same Angular 8 app to demonstrates the usage of Angular 8 ngIf directive with examples.

Create an Angular Component - NgifComponent

Let's create NgifComponent in an existing angular8-helloworld-example-tutorial project with the following command:

C:\Angular\angular8-helloworld-example-tutorial\src\app> ng g c ngif
CREATE src/app/ngif/ngif.component.html (19 bytes)
CREATE src/app/ngif/ngif.component.spec.ts (614 bytes)
CREATE src/app/ngif/ngif.component.ts (261 bytes)
CREATE src/app/ngif/ngif.component.css (0 bytes)
UPDATE src/app/app.module.ts (798 bytes)

ngif.component.ts - NgifComponent

The ngif.component.ts file defines the logic associated with NgifComponent. Let's add the following content to NgifComponent:

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

@Component({
  selector: 'app-ngif',
  templateUrl: './ngif.component.html',
  styleUrls: ['./ngif.component.css']
})
export class NgifComponent {

  show: boolean = true

  user = {
    id : 1,
    name: "Ramesh"
  };

  a = true;
  b = false;

  showActions = true;

  users = [{
    id: 100,
    firstName: "Ramesh",
    lastName: "Fadatare",
    emailId: "ramesh@gmail.com"
  },
  {
    id: 101,
    firstName: "Tony",
    lastName: "Stark",
    emailId: "tony@gmail.com"
  }, {
    id: 100,
    firstName: "Tom",
    lastName: "Cruise",
    emailId: "tom@gmail.com"
  }];
}

ngif.component.html - ngIf Directive Examples

The ngif.component.html file defines the HTML template associated with the NgifComponent. Refer the comments in this file are self-descriptive. Replace ngif.component.html file with the following content in it -

<div class="container">
  <h1>ngif Examples</h1>
  <!-- ngIf - Show this all the time -->
  <b>ngIf - Show this all the time</b>
  <p> *ngIf="show">Show this only if "show" is true</p>

  <!-- ngIf - Avoiding "Cannot read property of undefined" errors -->
  <b>ngIf - Avoiding "Cannot read property of undefined" errors</b>
  <p *ngIf="user">
    {{user.name}}
  </p>

  <!-- ngIf - Logical NOT (!) example -->
  <b>ngIf - Logical NOT (!) example</b>
  <p *ngIf="!show">
    Show this only if "show" is NOT true
  </p><br>

  <!-- ngIf - Logical AND (&&) example -->
  <b>ngIf - Logical AND (&&) example</b>
  <p *ngIf="a && b">
    Show this only if a AND b are true
  </p><br>
  <!-- ngIf - Logical OR (||) example -->
  <b>ngIf - Logical OR (||) example</b>
  <p *ngIf="a || b">
    Show this only if a OR b is true
  </p><br>

  <!--  ngIf - Working with "else" Examples -->
  <b> ngIf - Working with "else" Examples</b>
  <div *ngIf="show; else notShow">
    <p>
      Show this only if "show" is true
    </p>
  </div>

  <ng-template #notShow>
    <p>
      Show this only if "show" is not true
    </p>
  </ng-template>

  <!-- NgIf with "then" example -->
  <b>NgIf with "then" example</b>
  <ng-template *ngIf="show;then showBlock; else notShowBlock">
  </ng-template>

  <ng-template #showBlock>
    <p>
      Show this only if "show" is true
    </p>
  </ng-template>

  <ng-template #notShowBlock>
    <p>
      Show this only if "show" is not true
    </p>
  </ng-template>

  <!-- ngIf and ngFor with Table example -->
  <b>ngIf and ngFor with Table example</b>
  <table class="table table-striped">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th *ngIf="showActions">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users">
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
            <td>{{user.emailId}}</td>
            <td *ngIf="showActions">
                    <button>Delete</button>
                    <button>Update</button>
            </td>
          </tr>
        </tbody>
      </table>
</div>

Working with "else"

The angular ngIf directive does also allow us to declare an else-block. This block is shown if the statement defined in the main block happens to be false.

 <!--  ngIf - Working with "else" Examples -->
  <b> ngIf - Working with "else" Examples</b>
  <div *ngIf="show; else notShow">
    <p>
      Show this only if "show" is true
    </p>
  </div>

  <ng-template #notShow>
    <p>
      Show this only if "show" is not true
    </p>
  </ng-template>

Working with ngIf "then"

In some rare cases, it might be useful to have the ngIf directive from its actual result-block. This would enable us to swap the result of the block out on the fly, by just referencing another ng-template.

For that reason, angulars' ngIf directive also has a then property.

<!-- NgIf with "then" example -->
  <b>NgIf with "then" example</b>
  <ng-template *ngIf="show;then showBlock; else notShowBlock">
  </ng-template>

  <ng-template #showBlock>
    <p>
      Show this only if "show" is true
    </p>
  </ng-template>

  <ng-template #notShowBlock>
    <p>
      Show this only if "show" is not true
    </p>
  </ng-template>

app-routing.module.ts - Add Entry Routing

Let's add an entry in app-routing.module.ts file :

 {path: 'ng-if', component: NgifComponent}

Here is the complete code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { NgforComponent } from './ngfor/ngfor.component';
import { NgifComponent } from './ngif/ngif.component';

const routes: Routes = [
  {path: '', component: HelloWorldComponent},
  {path: 'hello-world', component: HelloWorldComponent},
  {path: 'ng-for', component: NgforComponent},
  {path: 'ng-if', component: NgifComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Output

Hit this link in browser: http://localhost:4200/ng-if

Check out complete Angular 8 tutorial with examples - Angular 8 Tutorial with Examples.

The source code of this tutorial available on my GitHub Repository.

<< Back to Angular Tutorial

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF