Control Flow in Templates | CodeSignal Learn

Control Flow in Templates | CodeSignal Learn

Introduction to Control Flow in Angular Templates

Welcome back! In our previous lessons, we laid the groundwork by setting up an Angular project, understanding its structure, and creating components. Now, we're ready to explore how Angular's control flow directives can make our applications more dynamic and interactive. Control flow in Angular templates allows us to conditionally render elements and iterate over data collections, enhancing the user experience. Let's dive into these powerful tools and see how they can transform our applications! 🚀 In the past, Angular developers used directives like *ngIf, *ngFor, and *ngSwitch for control flow in templates. These directives have been replaced with the new @if, @for, and @switch syntax, which offer a more concise and readable approach to handling control flow in Angular templates.

Using @if for Conditional Rendering

The @if control flow is a simple yet powerful tool for conditionally displaying elements in your Angular templates. It allows you to include or exclude elements based on a condition. HTML @if (isLoggedIn) {<div> <h1>Welcome, {{ username }}!</h1> </div>} @else {<div> <h1>Please log in</h1> </div>} In this example, the first <div> is displayed only if isLoggedIn is true, showing a personalized welcome message. If isLoggedIn is false, the second <div> prompts the user to log in. This conditional rendering is crucial for creating personalized and responsive user interfaces.

Implementing @for for Iterating Over Data

The @for control flow is essential for iterating over arrays and displaying lists of items. It simplifies the process of rendering multiple elements based on data collections. HTML <ul> @for (item of items; track trackById(item)) {<li>{{ item.name }}</li>} @empty {<li>No items available</li>} </ul> Here, @for iterates over the items array, creating a list item for each element. The track function optimizes performance by tracking items by their unique id, reducing unnecessary re-renders. The @empty block provides a fallback template that is rendered when the items array is empty or undefined, ensuring users always see meaningful content even when there's no data to display. In addition to the main item being iterated over, Angular provides contextual variables within the @for loop, such as $index, which represents the current index of the item in the array. These variables can be found in the official documentation . This approach is particularly useful when dealing with large datasets or when data might not be immediately available.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Applying @switch for Handling Multiple Conditions

The @switch control flow is used to display different templates based on the value of an expression. It's similar to a switch statement in programming. @switch (userRole) {@case ('admin') {<p>Admin Dashboard</p>} @case ('user') {<p>User Dashboard</p>} @default {<p>Guest Dashboard</p>}} In this example, the displayed paragraph changes based on the userRole value. If userRole is'admin', the admin dashboard is shown; if'user', the user dashboard is displayed. If neither, the guest dashboard appears. This flexibility is invaluable for tailoring content to different user roles.

Practical Code Example: Building a Dynamic Component

Let's put these concepts into practice with a dynamic component example. We'll use @if and @for to create a personalized user interface. @Component({selector: 'app-root', template: ` <div> @if (isLoggedIn) {<h1>Welcome, {{ username }}!</h1>} @else {<h1>Please log in</h1>} <ul> @for (item of items; track trackById(item)) {<li>{{ item.name }}</li>} </ul> </div> `}) export class AppComponent {isLoggedIn = true; username = 'User'; items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]; trackById(index: number, item: any): number {return item.id;}} In this component, we use @if to conditionally display a welcome message based on the isLoggedIn status. The @for control flow iterates over the items array, rendering each item's name in a list. The trackById function ensures efficient rendering by tracking items by their id .

TypeScript

@Component({
  selector: 'app-root',
  template: `
    <div>
      @if (isLoggedIn) {
        <h1>Welcome, {{ username }}!</h1>
      } @else {
        <h1>Please log in</h1>
      }
      <ul>
        @for (item of items; track trackById(item)) {
          <li>{{ item.name }}</li>
        }
      </ul>
    </div>
  `
})
export class AppComponent {
  isLoggedIn = true;
  username = 'User';
  items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

  trackById(index: number, item: any): number {
    return item.id;
  }
}