Diretivas Customizadas Angular!

Agora vamos aprender a criar uma diretiva customizada. Para isso vamos seguir alguns passos:

• Vamos usar o decorator “@Directive”;
• Fazer o import e injeção das dependências que precisaremos para nossa diretiva;
• Registar a diretiva.

Assim como os componentes customizados, podemos criar e registar a diretiva manualmente ou usar o CLI para isso e iremos usá-lo:

ng generate directive nome_diretiva_customizada

Agora vamos criar nossa diretiva com o nome de “bgColor”.

ng generate directive bgColor

E como já vimos antes, ele irá criar nossa diretiva e já fazer o registro em nosso “app.module.ts”.

Dois arquivos foram criados:

1. Bg-color.directive.spec.ts. Que é um arquivo que usamos para testes, não iremos nos preocupar no momento com ele, então podemos deletar.
2. Bg-color.directive.ts. Aqui é a nossa classe que ficará com o comportamento da diretiva.

Podemos também criar uma pasta para as diretivas, para isso usaremos o esquema de caminho:

ng generate directive directives/bg-color/bgColor

Para deixar tudo mais simples, iremos optar pela primeira opção.

Comportamento da Diretiva e injeção de dependência

Nosso próximo passo é definir o comportamento de nossa diretiva e fazer as importações e injeções de dependências que iremos precisar para o nosso trabalho.

Quando abrirmos o arquivo “bg-color.directive.ts”, vamos perceber que é muito parecido com o arquivo de componente, pois usamos o CLI para gerar e assim o Angular já deixou algumas coisas para nós.

• O seletor como podemos ver é o mesmo nome da diretiva, porém com o prefixo “app” antes “appBgColor”.
• O mesmo vale para nossa classe “BgColorDirective”.

Digamos que iremos mudar a aparência de um elemento dentro da nossa diretiva. Para isso precisamos pegar um elemento do DOM que queremos mudar e o Angular nos dá essa possibilidade usando o “ElementRef”.

Aqui é onde a injeção de dependência vem. Vamos importar o “ElementRef” no topo do arquivo, e fazer a assinatura no construtor.

A injeção de dependência fornece ao componente tudo que ele necessita para funcionar.

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
  constructor(private elRef: ElementRef) { }
}

Agora temos uma variável que usamos para acessar o valor do elemento pelo elRef.nativeElement.

import { Directive, ElementRef } from '@angular/core';
 
@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
 
  constructor(private elRef: ElementRef) {
    elRef.nativeElement.style.backgroundColor = 'red';
    elRef.nativeElement.style.color = 'orange';
  }
 
}

No exemplo acima, mudando o background color do elemento para red (vermelho) e a cor do texto para orange (laranja) acessando a propriedade “style” do elemento.

Agora é só adicionar a diretiva em qualquer elemento que queremos que receba essas propriedades.

<p appBgColor>Dener Troquatte</p>

Compatibilidade NodeJS

Não há implementação completa do DOM em servidores node.js, sendo assim, não conseguimos acessar os elementos diretamente como no exemplo, porém podemos usar o Render2 que é uma camada de abstração no DOM.

Antes de usar, temos que fazer o import e injeção.

import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
  constructor(private elRef: ElementRef, private rend2: Renderer2) { }
}

Para mudar a aparência do elemento como fizemos no exemplo, devemos usar o método do Render2 chamado “setStyle()”.

import { Directive, ElementRef, Renderer2 } from '@angular/core';
 
@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
  constructor(private elRef: ElementRef, private rend2: Renderer2) {
    rend2.setStyle(elRef.nativeElement, 'backgroundColor', 'red');
    rend2.setStyle(elRef.nativeElement, 'color', 'orange');
 }
}

É uma melhor prática usar o Render2 do que acessar o elemento diretamente como fizemos no primeiro exemplo.

Reagindo aos eventos de usuário

Podemos criar uma diretiva que reage de alguma forma aos eventos do usuário, como inputs de mouse, para isso usamos o decorator “@HostListener”.

Vale lembrar que o “@HostListener” não é limitado somente a diretivas, podemos usar em componentes também.

@HostListener('nome-do-evento-DOM') NomeDoMetodo() { }

Quando o “nome-do-evento-DOM” é disparado o “NomeDoMetodo()” é executado.

Vamos criar um evento onde o usuário deixa o mouse sobre o parágrafo (um hover) e ele muda de cor.

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';
 
@Directive({
  selector: '[appBgColor]'
})
export class BgColorDirective {
 
  constructor(private elRef: ElementRef, private rend2: Renderer2) { }
 
  setColors(bgCol: string, txtCol: string) {
    this.rend2.setStyle(this.elRef.nativeElement, 'backgroundColor', bgCol);
    this.rend2.setStyle(this.elRef.nativeElement, 'color', txtCol);
  }
 
  @HostListener('mouseenter') onMouseEnter() {
    this.setColors('red', 'orange');
  }
 
  @HostListener('mouseleave') onMouseLeave() {
    this.setColors('blue', 'pink');
  }
}

Como vimos no exemplo, usamos dois “@HostListener”:

• O “mouseenter” é um evento onde é executado quando o usuário deixa o mouse sobre o elemento, sendo assim ele invoca o setColor() e muda os parâmetros setados nele.
• O “mouseleave” é o evento contrário, é executado quando o usuário tira o mouse do elemento, sendo assim disparado também o setColor() e muda os parâmetros novamente.

Como podemos ver no browser, tudo funciona como o esperado, tanto quando damos o hover no elemento e quando tiramos também.