Criando Diretivas Estruturais em Angular

Vamos criar uma diretiva estrutural simples. Adicionaremos um novo arquivo ao projeto na pasta src/app com o nome while.directive.ts:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── while.directive.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

Esse arquivo conterá a diretiva. Definiremos o seguinte código no arquivo:

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

@Directive({
  selector: "[while]",
  standalone: true,
})
export class WhileDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set while(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

A diretiva estrutural deve aplicar o decorador @Directive, onde o nome do seletor é passado entre colchetes. Nesse caso, o seletor é "while".

Para obter acesso ao modelo da diretiva, usamos o objeto TemplateRef. Esse objeto é passado automaticamente para o construtor por meio do mecanismo de injeção de dependências. Além dele, o construtor também recebe o objeto do renderizador, ViewContainerRef. Ao usar o modificador private para ambos esses parâmetros, variáveis locais serão criadas automaticamente e poderemos acessá-las posteriormente.

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

Usamos uma propriedade de entrada (input) com um setter, ao qual aplicamos o decorador @Input. A partir dele, receberemos valores externos que podem ser utilizados ao criar a marcação HTML. Neste exemplo, recebemos um valor booleano externo:

@Input() set while(condition: boolean) {
  if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
  } else {
      this.viewContainer.clear();
  }
}

Se condition for true, renderizamos o modelo chamando this.viewContainer.createEmbeddedView(this.templateRef);. Isso faz com que o elemento ao qual a diretiva foi aplicada apareça na página web.

Caso contrário, se condition for false, removemos o elemento da marcação usando this.viewContainer.clear().

Basicamente, essa diretiva funciona como um análogo do ngIf.

Agora, vamos aplicar a diretiva no componente principal, AppComponent:

import { Component } from "@angular/core";
import { WhileDirective } from "./while.directive";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [WhileDirective],
  template: `<p *while="condition">Primeiro parágrafo</p>
    <p *while="!condition">Segundo parágrafo</p>
    <button (click)="toggle()">Alternar</button>`,
})
export class AppComponent {
  condition = true;
  toggle() {
    this.condition = !this.condition;
  }
}

Após executar a aplicação, será possível controlar a adição ou remoção de determinados blocos da página web utilizando essa diretiva:

Criando Diretivas Estruturais em Angular