How to use ngif else then in angular

How to use ngif else then in angular

Lets understand how to use ngif else then conditions in angular in detail.

Basic ngIf :

NgIf is a behavioral directive that allows us to toggle part of a template based on a conditional value. Basically it works as typical if(condition){ .. }.

In Angular, the *ngIf directive is used for conditional rendering of elements in templates. It allows you to display or hide content based on the value of a condition. Here’s an example of how to use *ngIf in Angular:

<div *ngIf="isShow">
  <!-- Content to show when the condition is true -->
  <p>This content will be displayed if the condition is true.</p>
</div>

<!-- negated variable to achieve "if not" -->
<div *ngIf="!isShow">
  <!-- Content to show when the condition is false-->
  <p>This content will be displayed if the condition is false.</p>
</div>

You can also use *ngIf on other types of elements like <ng-container>, <ng-template>, and even on Angular components.

*ngIf and Else

It behaves very similar to a JavaScript if (condition) { } else { } statement. Nice and simple!

You can use the *ngIf directive with an “else” condition by combining it with the *ngIf and *ngIfElse directives. This allows you to define alternative content when the condition evaluates to false. Here’s an example:

<div *ngIf="isShow; else elseBlock">
  <!-- Content to show when the condition is true -->
  <p>This content will be displayed if the isShow is true.</p>
</div>

<ng-template #elseBlock>
  <!-- Content to show when the condition is false -->
  <p>This content will be displayed if the isShow is false.</p>
</ng-template>

In this example, the <div> element will be rendered if the condition evaluates to true. If the condition is false, the content inside the elseBlock template will be rendered instead.

The elseBlock is defined using the ng-template directive and given a template reference variable (#elseBlock). This allows it to be referenced in the *ngIf directive as the else condition.

*ngIf, Then and Else

In Angular, you can use the *ngIf directive with the then and else clauses to conditionally render content based on a condition. This allows you to provide different templates for the true and false cases of the condition. Here’s an example:

<ng-container *ngIf="isShow; then trueBlock else falseBlock"></ng-container>

<ng-template #trueBlock>
  <!-- Content to show when the condition is true -->
  <p>This content will be displayed if the isShow is true.</p>
</ng-template>

<ng-template #falseBlock>
  <!-- Content to show when the condition is false -->
  <p>This content will be displayed if the isShow is false.</p>
</ng-template>

In this example, the ng-container acts as a placeholder element that holds the condition. If the condition is true, the content inside the trueBlock template will be rendered. If the condition is false, the content inside the falseBlock template will be rendered instead.

That’s all about different ways on how to use ngif else then conditions in angular.