How To Use ngIf, else, Then In Angular

The Code Points May 27, 2022 0

The ngIf directive is an Angular structural directive that lets us add or delete DOM elements based on a condition. In this article, we will learn about the syntax of ngIf. We will use example to demonstrate how to use ngIf. Using the ng-template, we will also learn how to use the optional otherwise and optional then clauses.

ngIf Syntax

<p *ngIf="condition">
    content to render, when the condition is true 
</p>

A DOM element is linked to the ngIf ( p element in the above example). Because ngIf is a structural directive, you can use it on any element, such as div, p, h1, component selector, and so on. It is prefixed with an asterisk, as are all structural directives.

An expression is bound to the *ngIf (a condition in the above example). The ngIf directive then evaluates the expression. Either true or false must be returned by the expression.

Angular removes the entire element from the DOM if the expression evaluates to false. If true, the element will be added to the DOM.

Hidden attribute Vs ngIf

<p [hidden]="condition">
    content to render, when the condition is true 
</p>

The difference between [hidden]='false' and *ngIf='false' is that the first technique simply hides the element, whereas the second approach hides it completely. The ngIf second function fully removes the element from the DOM.

You can mimic the else condition by using the Logical NOT (!).

<p *ngIf="!condition">
    content to render, when the condition is false
</p>

Because we're using the ngModal directive, import FormsModule in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ngIf else

Using the ng-template, we can define optional else blocks with the ngIf.

<div *ngIf="condition; else elseBlock">
    content to render, when the condition is true 
</div>
 
<ng-template #elseBlock>
    content to render, when the condition is false 
</ng-template>

The condition is followed by a semicolon in this expression.

The else clause is then connected to a template called elseBlock. The ng-template can be used to define the template anywhere. For readability, put it directly after ngIf.

The ngIf Directive renders the ng-template with the name #elseBlock when the condition evaluates to false.

ngIf then else

You can also use the ng-template to define a then else block.

<div *ngIf="condition; then thenBlock else elseBlock"> 
    This content is not shown
</div>
 
<ng-template #thenBlock>
    content to render when the condition is true.
</ng-template>
 
<ng-template #elseBlock>
    content to render when condition is false.
</ng-template>

Then clause is followed by a template named thenBlock in this case.

The template thenBlock is rendered when the condition is true. If false, the template elseBlock is used instead.

Conclusion

In this article, we covered how to use the ngIf directive to add/remove DOM elements. The optional then and else clauses can be used with the ngIf. In next article we will learn about the Custom Directives In Angular. 

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.