Lesson 5
Structural Directives in Angular
Introduction to Structural Directives

Welcome to the lesson on structural directives in Angular! 🎉 In this lesson, we'll explore how structural directives can dynamically alter the DOM layout by adding or removing elements. Structural directives are a powerful feature in Angular, allowing developers to control the structure of their applications efficiently. Unlike attribute directives, which modify the appearance or behavior of an element, structural directives change the DOM layout itself. Let's dive in and see how these directives can enhance your Angular applications.

Exploring Built-in Structural Directives

As you may recall from previous lessons, Angular provides three built-in structural directives: *ngIf, *ngFor, and *ngSwitch. These directives are essential for rendering content conditionally and iterating over data collections, although they are not the recommended method for control flow in Angular.

TypeScript
1@Component({
2  selector: 'app-example',
3  templateUrl: './app-example.component.html'
4})
5export class ExampleComponent {
6  isVisible = true;
7  items = ['Item 1', 'Item 2', 'Item 3'];
8  status = 'active';
9}
HTML, XML
1<div *ngIf="isVisible">This is visible only if isVisible is true.</div>
2<ul>
3  <li *ngFor="let item of items">{{ item }}</li>
4</ul>
5<div [ngSwitch]="status">
6  <p *ngSwitchCase="'active'">Active</p>
7  <p *ngSwitchCase="'inactive'">Inactive</p>
8  <p *ngSwitchDefault>Unknown</p>
9</div>

In this example, *ngIf conditionally displays a message based on the isVisible property. The *ngFor directive iterates over the items array, rendering each item in a list. Finally, *ngSwitch displays different content based on the status value. While these directives are fundamental for creating dynamic and responsive user interfaces, it's important to explore more advanced control flow techniques in Angular for complex applications.

Creating a Custom Structural Directive

Now, let's create a custom structural directive to understand how Angular's directive system works. We'll build a directive that shows content during a loading state.

TypeScript
1import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
2
3@Directive({
4  selector: '[appShowDuringLoading]'
5})
6export class ShowDuringLoadingDirective {
7  private hasView = false;
8
9  constructor(
10    private templateRef: TemplateRef<any>,
11    private viewContainer: ViewContainerRef
12  ) {}
13
14  @Input() set appShowDuringLoading(isLoading: boolean) {
15    if (isLoading && !this.hasView) {
16      this.viewContainer.createEmbeddedView(this.templateRef);
17      this.hasView = true;
18    } else if (!isLoading && this.hasView) {
19      this.viewContainer.clear();
20      this.hasView = false;
21    }
22  }
23}

This directive uses TemplateRef to reference the template and ViewContainerRef to manage the view's rendering. The appShowDuringLoading input determines whether the content should be displayed. If isLoading is true, the template is rendered; otherwise, it is cleared. This custom directive provides a flexible way to manage loading states in your application.

Implementing the Custom Directive in an Angular Component

Let's see how to integrate our custom directive into an Angular component to simulate a loading state and render content conditionally.

TypeScript
1@Component({
2  selector: 'app-root',
3  templateUrl: 'app-root.component.html',
4})
5export class AppComponent {
6  isLoading = true;
7  data: string[] = [];
8
9  constructor() {
10    setTimeout(() => {
11      this.isLoading = false;
12      this.data = ['Item 1', 'Item 2', 'Item 3'];
13    }, 3000);
14  }
15}
HTML, XML
1<h1>Data Loading Example</h1>
2<div *appShowDuringLoading="isLoading">
3  <p>Loading...</p>
4  <div class="spinner"></div>
5</div>
6@if (!isLoading) {
7  <p>The data will be shown here</p>
8}

In this component, we use the appShowDuringLoading directive to display a loading message and spinner while isLoading is true. Once the simulated API call completes, isLoading is set to false, and the loaded data is displayed. This demonstrates how custom directives can be used to manage content visibility based on the application state.

Best Practices and Common Pitfalls

When using structural directives, it's important to follow best practices to maintain clean and efficient code. Here are some tips:

  • Use Directives Judiciously: Avoid overusing structural directives, as they can lead to complex and hard-to-maintain code.
  • Keep Logic Simple: Ensure that the logic within directives is straightforward to prevent confusion.
  • Combine with Other Features: Structural directives can be combined with services or state management for more dynamic applications.

By adhering to these practices, you can leverage the power of structural directives while keeping your codebase manageable.

Conclusion and Next Steps

In this lesson, we explored the world of structural directives in Angular, learning about built-in directives like *ngIf, *ngFor, and *ngSwitch, and creating a custom directive to manage loading states. These tools are essential for building dynamic and responsive applications. As you move on to the practice exercises, you'll have the opportunity to apply these concepts and solidify your understanding. In the upcoming lessons, we'll continue to build on these skills, diving deeper into Angular's capabilities. Keep up the great work! 🚀

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.