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 thevideo
variable. - If
video
is equal to'video.large'
, it renders the content inside theng-switch-when
block; otherwise, it renders the content inside theng-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
andng-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 whenisLarge
is false. - It’s noted that using
ng-show
andng-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 ifvideo.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
andng-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 expressionvideo == 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 expressionvideo != 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 conditionConditionVar
. - 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 butsomeOtherCondition
is true, the content inside the second<div>
will be displayed. - If both
someCondition
andsomeOtherCondition
are false, the content inside the third<div>
(theng-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.