Ng-If in Angular With Multiple Conditions

1. Working of ng-if in AngularJS
2. <ng-template> in AngularJS
3. Using ngIf With Multiple Conditions
4. Compare Strings for Equality Using *ngIf

A ngIf directive is a powerful tool in AngularJS (https://angular.io/features) that lets you dynamically show and hide HTML content. It can also show or hide content based on an expression. If the ng-if directive’s statement evaluates to a TRUE Boolean value, the element is inserted into the HTML view; otherwise, it is deleted from the DOM entirely. This article will discuss the AngularJS ng-if with multiple conditions.

Syntax:

<element ng-if="expression"**>
</element>**

Working of ng-if in AngularJS

It is critical to understand that all In-Built directives provided by the AngularJS framework will always be designated with the ng prefix in the AngularJS framework. The ng-if directive’s statement evaluates to a Boolean value, such as True or False, and the element is shown on the HTML DOM according to this value.

When the ng-if expression evaluation returns a False value, the element is deleted from the DOM. Another thing to bear in mind is that when an HTML element is removed with ngIf, its scope is destroyed, and when the element is put back into the view, a new scope is established.

Here, you need to understand the difference between ng-if and ng-show angular directive before getting into the deep.

When the expression evaluation of the ng-if directive is FALSE, the element is removed from the DOM; however, when the expression evaluation of the ng-show directive is FALSE, the element is hidden in the DOM instead of being removed, which is done using the CSS attribute of display hidden.

Example

If you have a PHP background, you may write if-else blocks directly in HTML templates, as seen below.

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

However, we can’t use brackets in HTML to write if-else blocks because only markup elements should be included in the HTML file. The ideal solution will be to replace if else condition blocks with something.

<ng-template> in AngularJS

Before the fundamental directive, ngIf have you ever considered asterisk(*)? When using HTML elements in the *ngif directive, angular will wrap that element in a <ng-template> tag with the provided condition. To learn more about ng-template, click here.

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

In the Angular framework, <ng-template> is a pseudo element that will not be included in the final HTML output. Only the elements within the <ng-template> will be inserted. If the element has any characteristics, such as an id or a class, use them. Those elements will be appended to the <div> element within the <ng-template>.

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

Using ngIf With Multiple Conditions

Let’s discuss the following conditions of AngularJS ng-if.

First is the AND condition, second is the OR condition, and the third is the NOT condition.

AND Condition in *ngIf (&&)

To determine the believability of a *ngIf statement, we can employ numerous conditions with the logical operator AND (&&). The element will be added to the DOM if all conditions are fulfilled. The following example demos how AngularJS evaluates an AND condition:

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

OR Condition in *ngIf (||)

If only one of the conditions is true, you can use *ngIf to display the element with the help of the OR (||) operator. The following code snippet demonstrates the use of the OR condition in ngIf.

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

OR Condition in *ngIf (!)

To reverse the *ngIf condition, we can use the NOT operator(!) as seen below.

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

Compare Strings for Equality Using *ngIf

Within the *ngIf statement, we can apply the double equal(==) or triple equal(===) operators to compare strings for equality.

When comparing strings for equality, it’s straightforward to misplace or forget to use double equal or triple equal and instead use the assignment operator (single equal).

When you use an assignment operator inside *ngIf, you’ll get the Parser Error: Bindings cannot contain assignments at column error, as seen below.

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

When comparing a static string inside a *ngIf quotes should be used. There is no need to use quotations while comparing component string variables.