Author -  Sai gowtham

Angular ngIf,else tutorial with examples

In this tutorial, we are going to learn about how to use ngIf directive to conditionally show or hide elements in angular.

*ngIf Directive

The *ngIf directive binds to an expression, if the expression value is evaluated to true then the element is added to dom else the element is not added to the dom.

This example shows you how to use *ngIf directive.

app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isActive = true;
}
app.component.html
<div>
    <h1 *ngIf="isActive">Hello angular</h1></div>

In the above code, we have added *ngIf="isActive" to h1 element and isActive property value is true, so that we can see the h1 element in the dom.

Note: Asterisk * is important to add in front of ngIf directive.

If we want to hide the h1 element, we can do it by adding a ! negation sign in front of isActive property.

app.component.html
<div>
    <!-- you can't see me -->
    <h1 *ngIf="!isActive">Hello angular</h1></div>

Extending *ngIf directive with else statement

Instead of showing and hiding the same element, we can render the different element if our provided expression is evaluated to false by using else statement.

Example:

<div>
    <h1 *ngIf="isActive else notActive">Hello angular</h1>
    <ng-template #notActive><h1>Hello React</h1></ng-template></div>

Here we included else notActive to *ngIf directive so that we can use #notActive as a reference variable to show the different element if our provided expression evaluates to false.

Why we used ng-template?

The ng-template is an angular element to render the HTML, by using ng-template angular replaces the provided element with a comment and only render the element when it’s needed, like in our example ng-template only renders the element when an else statement is active.

If you’re not comfortable with this else syntax, we can also achieve the same (if, else) thing using ! negation sign.

Example:

<div>
    <h1 *ngIf="isActive">Hello angular</h1>
    <h1 *ngIf="!isActive">Hello React</h1>
</div>

In the above code, the first h1 element will render when an isActive is true and second h1 element will render when a isActive is not true, it means (false or else) case.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY