Table of Contents

1. Introduction
2. Understanding Angular ngIf Else Directive
3. Syntax and Usage
4. Examples of Angular ngIf Else
    4.1 Example 1: Simple ngIf Else Statement
    4.2 Example 2: Using ngIf Else with Template References
    4.3 Example 3: Multiple ngIf Else Statements
5. Conclusion

1. Introduction

Angular is a popular JavaScript framework used for building dynamic web applications. One of the key features of Angular is its ability to conditionally render elements in the DOM based on certain conditions. The `ngIf` directive is a powerful tool that allows developers to control the visibility of elements based on the truthiness of an expression. In this article, we will explore the usage of `ngIf` Else directive in Angular and provide some examples to demonstrate its functionality.

2. Understanding Angular ngIf Else Directive

The `ngIf` Else directive is an extension of the `ngIf` directive in Angular. It allows you to specify an alternative template to be rendered when the condition provided to the `ngIf` directive evaluates to false. This means that if the condition is false, the template defined within the `ng-template` block associated with `ngIf` Else will be rendered instead of the default template.

3. Syntax and Usage

The syntax for using `ngIf` Else is as follows:

<ng-container *ngIf=”condition; else elseBlock”>
    <!– Content to be rendered when condition is true –>
</ng-container>

<ng-template #elseBlock>
    <!– Content to be rendered when condition is false –>
</ng-template>

Here, the `condition` represents the expression that determines whether the content should be rendered or not. If the `condition` evaluates to true, the content within the `ng-container` block will be rendered. Otherwise, the content within the `elseBlock` template will be rendered.

4. Examples of Angular ngIf Else

Let’s dive into some examples to understand how `ngIf` Else works in practice.

4.1 Example 1: Simple ngIf Else Statement

<div *ngIf=”isLoggedIn; else loginBlock”>
    <p>Welcome, user!</p>
    <button (click)=”logout()”>Logout</button>
</div>

<ng-template #loginBlock>
    <p>Please log in to continue.</p>
    <button (click)=”login()”>Login</button>
</ng-template>

In this example, we have a simple conditional rendering based on the `isLoggedIn` property. If the user is logged in, the `<div>` block containing the welcome message and logout button will be displayed. Otherwise, the `<ng-template>` block will be rendered, displaying a message and a login button.

4.2 Example 2: Using ngIf Else with Template References

<ng-container *ngIf=”showContent; else noContentBlock”>
    <ng-template #contentBlock>
        <h1>Content Title</h1>
        <p>This is some content.</p>
    </ng-template>
</ng-container>

<ng-template #noContentBlock>
    <p>No content available.</p>
</ng-template>

In this example, we utilize template references to define the alternative templates for `ngIf` Else. The `#contentBlock` template contains the title and content that will be displayed when `showContent` is true. If `showContent` is false, the `#noContentBlock` template will be rendered, showing a message indicating that no content is available.

4.3 Example 3: Multiple ng If/Else Statements

<div *ngIf=”condition1; else elseBlock1″>
    <!– Content to be rendered when condition1 is true –>
</div>

<ng-template #elseBlock1>
    <div *ngIf=”condition2; else elseBlock2″>
        <!– Content to be rendered when condition1 is false and condition2 is true –>
    </div>

    <ng-template #elseBlock2>
        <!– Content to be rendered when both condition1 and condition2 are false –>
    </ng-template>
</ng-template>

In this example, we have nested `ngIf` Else statements. The first `ngIf` statement checks `condition1`. If `condition1` is true, the content within the first `<div>` block will be displayed. If `condition1` is false, the execution moves to the `else` block, where another `ngIf` statement checks `condition2`. If `condition2` is true, the content within the second `<div>` block will be rendered. Finally, if both `condition1` and `condition2` are false, the content within the second `else` block will be displayed.

5. Conclusion

In this article, we explored the Angular `ngIf` Else directive and learned how to use it to conditionally render content based on true/false conditions. We covered the syntax and usage of `ngIf` Else, along with examples that demonstrated its functionality. By utilizing `ngIf` Else, you can dynamically control the visibility of elements in your Angular applications, providing a more interactive and personalized user experience. Remember to consider the SEO best practices when implementing Angular directives and always test your code for optimal performance.

Other Articles