Veja neste post como criar diretivas com Angular 4, 5 ou 6.

Diretivas em angular são usadas o tempo todo sabendo disso veja como criar as suas e utilizar de forma simples.

Para criar diretivas você deve ter instalado o Angular CLI, esta ferramenta nos ajuda muito para gerar nossos projetos, componentes e também nos ajuda a gerar nossas diretivas.

Nesse exemplo mostro como criar uma diretiva simples para demostrar o funcionamento.
Esta diretiva vai ter duas funções, pintar um Input de Amarelo ao receber o evento onFocus  e voltar a cor original ao perder o focu utilizando o evento onBlur dos componentes HTML.

Para criar uma diretiva basta executar no terminal o seguinte comando:

ng generate directive campo-colorido

Ou você pode utilizar o comando abreviado digitando somente:

ng g d campo-colorido  

campo-colorido é o nome da nossa diretiva.

Fazendo isso no seu projeto automaticamente o Angular CLI irá gerar 2 arquivos,

1 arquivo com .spec.ts que é um arquivo de teste e um arquivo

1 arquivo com .directive que é o nosso arquivo principal.

Automaticamente também anotará nossa diretiva em nosso AppModule assim não necessitamos importá-la.

Não necessitamos do arquivo .spec para esse propósito somente se você deseja fazer tests unitários. Você pode remover o arquivo .spec deletando ele ou você também tem a opção de não criar ele adicionando o seguinte parâmetro na hora de gerar o arquivo.

ng g d campo-colorido --spec=false

Adicionado –-spec=false nosso arquivo de test não será criado.

Sua diretiva será como essa:

 

 

 

 

Pronto já temos nossa diretiva, agora como usar essa diretiva?

Para esse exemplo não vou demonstrar como criar um componentes acreditando que você já deva saber como fazer isso, se não souber pode me pedir nos comentários que demonstro como criar.

Repare no selector da nossa diretiva que se chama appCampoColorido, por ser uma diretiva de atributo automaticamente o Angular CLI adiciona os colchetes [].

Você pode utilizar essa diretiva em qualquer componente.

Vou demonstrar agora como adicionar ações na nossa diretiva como mudar a cor de um campo input.

Para criar ações precisamos injetar 2 atributos na nossa diretiva. Esses dois atributos o Angular fornece automaticamente pra gente, assim só precisamos declarar no construtor.

 constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

Precisamos importar esses atributos na nossa diretiva:

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

ElementRef : se refere ao componente a qual nossa diretiva está aplicada.

Renderer2 :  com esse atributo podemos alterar o estilo ou comportamento de um elemento.

HostListener : com HotListener temos uma lista de vários eventos html para você pode utilizar na sua diretiva:

Agora vou demonstrar como utilizar esses eventos e como alterar a propriedade do elemento com a nossa diretiva.

Como estamos utilizando nossa diretiva imaginando que ela será aplicada a um componente Input então utilizaremos 2 eventos HTML, onfocus e onblur para alterar nosso componente.
Vou criar 2 métodos para alterar as propriedades do elemento:

 onFocus() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
  }

  onBlur() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
  }

Para alterar a propriedade de um elemento utilizamos o método setStyle da propriedade renderer.
Este método recebe 3 parâmetros, o atributo que desejamos alterar, o que desejamos alterar e o valor.

Ok, fazendo isso agora falta dizer que queremos que esses métodos sejam referenciados no nosso componente quando acontecer os eventos, é aí que entra a anotação  HotListener.

 @HostListener('focus') onFocus() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('blur') onBlur() {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
  }

Anotamos nossos métodos com a anotação HotListener que recebe como parâmetro o evento a qual queremos referenciar, nesse caso o onfocus e o onblur.

Feito isso já temos uma diretiva que pode ser usada em seu projeto Angular para alterar a cor de fundo de um componente quando ele receber o foco ou perder o foco.

Um exemplo de utilizaçao:

<input appCampoColorido type="text" >

Basta aplicar no nossos inputs a nossa diretiva appCampoColorido.

 

 

 

DEIXE UMA RESPOSTA