Structural Directives in Angular

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.

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.

@Component({
  selector: 'app-example',
  templateUrl: './app-example.component.html'
})
export class ExampleComponent {
  isVisible = true;
  items = ['Item 1', 'Item 2', 'Item 3'];
  status = 'active';
}

<div *ngIf="isVisible">This is visible only if isVisible is true.</div>
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<div [ngSwitch]="status">
  <p *ngSwitchCase="'active'">Active</p>
  <p *ngSwitchCase="'inactive'">Inactive</p>
  <p *ngSwitchDefault>Unknown</p>
</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.

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.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appShowDuringLoading]'
})
export class ShowDuringLoadingDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appShowDuringLoading(isLoading: boolean) {
    if (isLoading && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!isLoading && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

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.