Conditional Rendering in Angular Templates

Angular provides several ways to conditionally render content within your templates, allowing you to tailor the user interface based on application data. This tutorial explores the most common and effective techniques for achieving conditional rendering, from simple ternary operators to more structured directives.

Why Conditional Rendering?

Often, your application needs to display different content or elements based on certain conditions. For example, you might want to:

Show a loading indicator while data is being fetched.
Display different messages based on user roles or permissions.
Render different UI components based on data values.

Conditional rendering allows you to create dynamic and responsive user interfaces.

Methods for Conditional Rendering

Here are the primary methods available in Angular for conditional rendering:

1. Ternary Operator

The ternary operator (condition ? valueIfTrue : valueIfFalse) is a concise way to conditionally assign values or expressions directly within your template. It’s best suited for simple conditions and inline assignments.

<div>{{ isLarge ? 'Large Video' : 'Small Video' }}</div>

In this example, the text "Large Video" will be displayed if the isLarge variable is truthy, otherwise "Small Video" will be shown. You can use this to conditionally set attribute values as well:

<video height="{{ aspectRatio === 'widescreen' ? '270px' : '360px' }}"></video>

2. ngIf Directive

The ngIf directive is a powerful and flexible way to conditionally add or remove elements from the DOM. It checks a condition and, if the condition is truthy, renders the element and its content. If the condition is falsy, the element is removed from the DOM entirely.

<div *ngIf="isLoggedIn">
  Welcome, User!
</div>

<div *ngIf="!isLoggedIn">
  Please log in to continue.
</div>

The * symbol is shorthand for assigning the ngIf directive to the element. The element inside the ngIf block will only be rendered if isLoggedIn is truthy. Using the negation operator (!) lets you easily render content when a condition is not met.

3. ngSwitch Directive

When you have multiple conditions to check, the ngSwitch directive provides a clean and structured approach. It acts like a switch statement in programming languages.

<div [ngSwitch]="videoAspectRatio">
  <div *ngSwitchCase="'widescreen'">
    This is a widescreen video.
  </div>
  <div *ngSwitchCase="'4:3'">
    This is a standard ratio video.
  </div>
  <div *ngSwitchDefault>
    Unknown video aspect ratio.
  </div>
</div>

Here, the videoAspectRatio variable is evaluated, and the corresponding ngSwitchCase block is rendered. The ngSwitchDefault block is rendered if none of the cases match.

4. ngShow and ngHide Directives

These directives control the visibility of elements using CSS. ngShow adds the display: none; style when the condition is falsy, while ngHide adds it when the condition is truthy. The element remains in the DOM, but is hidden from view.

<div *ngShow="isLarge">
  Large content.
</div>
<div *ngHide="isLarge">
  Small content.
</div>

Choosing the Right Method

Ternary operator: Use for simple inline conditional assignments.
ngIf: Use when you need to add or remove elements from the DOM based on a condition. This is the most common and efficient approach.
ngSwitch: Use when you have multiple conditions to check and need a structured way to render different content based on the condition.
ngShow/ngHide: Use when you need to control the visibility of elements without removing them from the DOM. This can be less efficient than ngIf if you are frequently toggling the visibility of elements.