ngIf else if

Introduction

ngIf else if is a structural directive of Angular that allows you to conditionally render content. It lets you show or hide HTML elements based on an expression that evaluates to a boolean value. The else if part allows you to add additional conditions to your ngIf statement.

Syntax

The ngIf else if syntax is as follows:

<some-element *ngIf="condition1; else condition2">
  ...
</some-element>
<ng-template #condition2>
  <some-element *ngIf="condition3">
    ...
  </some-element>
  <some-element *ngIf="!condition3">
    ...
  </some-element>
</ng-template>

Here, the some-element is the element that you want to show or hide based on the conditions. The *ngIf directive is used to evaluate the first condition (condition1). If it is true, then the some-element is rendered. Otherwise, the else part is evaluated, which is a template reference (#condition2) to another template that contains more conditions (condition3).

If condition3 is true, then the first some-element is rendered. Otherwise, the second some-element is rendered.

Example

Let's say you have a component that displays a user profile. You want to show the user's name if it exists, and if not, show the username instead. You also want to show a default message if both the name and username are null.

<h1 *ngIf="name; else username">
  {{ name }}
</h1>
<ng-template #username>
  <h1 *ngIf="username">
    {{ username }}
  </h1>
  <h1 *ngIf="!username && !name">
    No Name or Username provided
  </h1>
</ng-template>

In this example, if the name is truthy, the first h1 element is shown with the name value. If the name is falsy, then the else block is evaluated. If username is truthy, then the second h1 element is shown with the username value. If both name and username are falsy, then the third h1 element is shown with the text "No Name or Username provided".

Conclusion

In conclusion, ngIf else if is a powerful directive for conditionally rendering content in Angular. By using the else if syntax, you can create more complex conditions that allow for more granular control over your application's UI.