Diretivas personalizadas no Angular

As diretivas permitem estender o HTML. Nesta lição, você conhecerá as diretivas personalizadas e aprenderá a criar as suas próprias.

O que é uma diretiva?

As diretivas alteram a aparência ou o comportamento dos elementos do DOM. O Angular fornece diretivas integradas, como *ngIf e *ngFor.

Tipos de diretivas

• Diretivas de componentes
• Diretivas de atributos - alteram a aparência ou o comportamento
• Diretivas estruturais - alteram o layout (como *ngIf)

Criando uma diretiva de atributo

Crie uma diretiva usando o Angular CLI:

ng generate directive highlight

ng generate directive highlight

Aplicando a diretiva

Use a sua diretiva como um atributo no seu modelo:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Lógica da diretiva

As diretivas contêm lógica que altera os elementos do DOM. Por exemplo, você pode definir a cor de fundo dinamicamente.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Decorador @HostListener

Use @HostListener para responder a eventos nos elementos que têm a sua diretiva:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() em diretivas

@Input() permite passar dados para as diretivas a partir dos modelos:

@Input() defaultColor: string;

Resumo

Você aprendeu a criar e usar diretivas personalizadas para aprimorar as suas aplicações Angular. Muito bem!