If Else Statement in AngularJS Templates

This article will show how you can implement the if else statement in AngularJS Templates.

AngularJS versions below 1.1.5 do not provide built-in if/else functionality. However, there are several alternative approaches to achieve conditional rendering. If you are using version 1.1.5 or greater, the ngIf directive is available, providing a cleaner and more straightforward way to implement if/else statements in your templates.

Versions below 1.1.5

This section of the tutorial addresses users who are working with AngularJS versions that are below 1.1.5. It highlights alternative approaches to achieve conditional rendering since the ngIf directive is not available in these versions.

1. Ternary Operator

In AngularJS versions below 1.1.5, the ternary operator is suggested as a clean way to implement conditional rendering in templates. It’s a concise way to express an if/else statement in a single line. The example given is for displaying different video sizes based on the value of isLarge.

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

Explanation:

• This line uses a ternary operator to conditionally render different video sizes based on the value of the isLarge variable.
• If isLarge is true, it displays 'video.large'; otherwise, it displays 'video.small'.

2. ng-switch Directive

The ng-switch directive is an alternative for conditional rendering based on different values. It provides a way to switch between multiple cases and render content accordingly.

Example

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

Explanation:

• The ng-switch directive is used to conditionally render content based on different values of the video variable.
• If video is equal to 'video.large', it renders the content inside the ng-switch-when block; otherwise, it renders the content inside the ng-switch-default block.

3. ng-hide/ng-show Directives

The ng-hide and ng-show directives are mentioned as an alternative, but it’s noted that using them will render both elements and then hide/show based on conditions. This may result in rendering unnecessary elements.

Example

<div ng-show="isLarge">
    <!-- code to render a large video block -->
</div>
<div ng-hide="isLarge">
    <!-- code to render the regular video block -->
</div>

Explanation:

• The ng-show and ng-hide directives are used to conditionally show or hide elements based on the value of the expression provided.
• When isLarge is true, the first <div> block will be shown (ng-show="isLarge"), and the second <div> block will be hidden (ng-hide="isLarge"). Vice versa when isLarge is false.
• It’s noted that using ng-show and ng-hide will render both elements in the DOM, but only one will be visible at a time based on the condition.

4. ng-class Directive

The ng-class directive is suggested as another option, allowing the conditional application of CSS classes based on a condition.

Example

<div ng-class="{ 'large-video': video.large }">
    <!-- video block goes here -->
</div>

Explanation:

• The ng-class directive allows conditional application of CSS classes based on a condition.
• Inside the curly braces {}, the key-value pair 'large-video': video.large is provided. This means that if video.large evaluates to true, the class 'large-video' will be applied to the <div> element.
• This allows for styling the <div> differently based on the condition provided.

Update: Angular 1.1.5 and Above

This section signifies a shift in the tutorial’s focus to users working with AngularJS versions 1.1.5 and above, where the ngIf directive becomes available for conditional rendering.

5. ng-if Directive

Angular 1.1.5 introduced the ng-if directive, which removes the element from the DOM if the expression is false and re-inserts it if the expression is true. This provides a more efficient way of handling conditional rendering.

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

Explanation:

• The ng-if directive is introduced in Angular 1.1.5 for efficient conditional rendering.
• If video is equal to 'video.large', the first div will be in the DOM; otherwise, the second div will be in the DOM.
• Unlike ng-show and ng-hide, ng-if removes the element from the DOM if the condition is false, providing better performance.

Latest Angular Versions

In the latest Angular versions (1.1.5 and above), the ng-if directive is again mentioned as a preferred method for conditional rendering due to its efficiency.

1. ngIf Directive

The ngIf directive is used for conditional rendering in AngularJS templates. It is particularly efficient because it removes elements from the DOM if the specified expression evaluates to false. This can be beneficial for performance, especially when dealing with complex and costly-to-create elements.

Example

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>

Explanation:

• The first <div> will be rendered only if the expression video == video.large is true. If true, it will render the code inside for a large video block.
• The second <div> will be rendered only if the expression video != video.large is true. If true, it will render the code inside for a regular video block.

2. Ternary Operator:

The ternary operator is a concise way to implement conditional rendering directly within AngularJS templates. It provides a more compact syntax for expressing if/else logic.

Example

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

Explanation:

• The content inside the curly braces ({{ ... }}) uses the ternary operator to evaluate the condition ConditionVar.
• If ConditionVar is true, it renders 'varIsTrue', and if false, it renders 'varIsFalse'.

Choosing Between ngIf and Ternary Operator

Use ngIf when:

• There is a need to conditionally include or exclude entire blocks of HTML.
• Performance is a concern, and you want to remove elements from the DOM when conditions are not met.

Use Ternary Operator when:

• You have a simple condition and want a concise way to handle rendering within an element.
• The condition is related to rendering text or a small portion of HTML.

Choose the approach that best fits the specific use case and improves the overall readability and maintainability of your code.

External Module (Optional)

An optional external module ng-elif is introduced for users who prefer more explicit if/else constructs. It provides ng-else-if and ng-else directives for handling multiple conditions in a cleaner way.

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

Explanation:

• If someCondition is true, the content inside the first <div> will be displayed.
• If someCondition is false but someOtherCondition is true, the content inside the second <div> will be displayed.
• If both someCondition and someOtherCondition are false, the content inside the third <div> (the ng-else block) will be displayed.

Choose the approach that best fits your needs and AngularJS version. If using a version 1.1.5 or above, prefer the ngIf directive for cleaner and more efficient code.