Angular 8 ngIf, ngIfElse, ngIfThen Tutorial with Examples

By Digamber Rawat Last updated on
In this tutorial, we are going to understand Angular 8 ngIf, ngIfElse, ngIfThen structural directive with Examples. Angular 8 offers a wide range of basic directives which help you to render the template based on the condition applied to the template.

The structural directive in Angular 8 works on boolean value pattern if the value is true, then the template is rendered, and if the value is false or null, then it doesn’t render the template. I will show you in this tutorial how do Angular 8 structural directives work with examples. Let us take a closer look at the structural directive properties.

Property Detail
ngIf It’s write-only property works on boolean expression to identify as the condition to render a template.
ngIfThen It’s write-only property, it renders the template when the the condition return true.
ngIfElse

It’s write-only property, it renders the template when the the condition return false.

Angular 8 *ngIf Example

The *ngIf directive in Angular 8 works on the same format as if else do in other programming languages. The template is rendered based on the result returned by the condition declared within the quotes "condition". If the result is true, then the template will be displayed else it won’t. Angular removes and includes the DOM node based on the returned value.

Let us check out the ngIf syntax:

<div *ngIf="condition">Content to be rendered when the condition is true.</div>

Using ngIf in Angular 8 is very easy, as you can see we have declared the ngIf with (*) along with the condition. If the condition is true, then the template will be rendered.

Angular 8 *ngIf Examples with JavaScript Operators

In this example we are going to learn how to use ngIf condition with various JavaScript operators.

Simple NgIf Example in Angular 8

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="admin">
      Hello <strong>John</strong>
    </div>
  `,
})

export class AppComponent  {
  admin = true;
}

Angular 8 ngIf Example with Not (!) Operator

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="!admin">
      Hello <strong>John</strong>
    </div>
  `,
})

export class AppComponent  {
  admin = true;
}

Angular 8 ngIf Example with && Operator

You can see how to use && JavaScript operator with *ngIf in Angular 8.

@Component({
  selector: 'my-app',
  template: `
    <input type="checkbox" [(ngModel)]="selected"/>
    <input type="checkbox" [(ngModel)]="selected2" />

    <span *ngIf="selected && selected2">
      Display me when both checkboxes are selected :)
    </span>
  `,
})

Angular 8 ngIf Example with JavaScript || (OR) Operator

You can see how to implement JavaScript || operator with *ngIf in Angular 8.

@Component({
  selector: 'angular-app',
  template: `
  <div *ngIf="a == 6 || b == 9">
    Angular 8 Or || Operator Demo
  </div>
  `,
})

export class AppComponent {
  a = 6;
  b = 9;
}

ngIfElse Example in Angular 8

In this example, we will have a closer look at the ngIfElse example in Angular. The else directive is very useful directive in Angular 8, and it was there in Angular JS as well. This directive is straightforward to implement.

Let us find out how we can implement if else condition to render the templates in Angular 8.

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="isLoogedIn; else isLoogedOut">
      Hello Admin
    </div>

    <ng-template #isLoogedOut>
      Hello Admin
    </ng-template>
  `,
})

export class AppComponent {
  isLoogedIn: boolean = false;
  isLoogedOut: boolean = true;
}

Now, in the given above example, we are rendering the <ng-template> based on the value returned by the if else condition.

Angular 8 ngIf, Then and Else Example

We are going to use ngIf, else and then in Angular 8. In this example, we will be switching the <ng-template> based on the condition. When we talk about if/then/else method, it provides immense flexibility to the Angular developers to show the content based on condition. Check out the below example.

@Component({
  selector: 'my-app',
  template: `
    <ng-container
      *ngIf="isLoggedIn; then logIn; else logOut">
    </ng-container>

    <ng-template #logIn>
        Hello, Admin
    </ng-template>

    <ng-template #logOut>
        Please Signin
    </ng-template>
  `,
})

export class AppComponent {
  logIn = true;
}

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.