Como criar directivas personalizadas no Angular

Uma das principais características do Angular são as directivas. As directivas Angular são uma forma de adicionar comportamento aos elementos DOM. O Angular fornece uma variedade de directivas incorporadas e também é possível criar directivas personalizadas nesta estrutura robusta.

O que são directivas?

As diretivas no Angular são construções de código especializadas projetadas para influenciar a apresentação e a interatividade de elementos HTML por vários meios, como modificar o Modelo de Objeto de Documento (DOM), adicionar manipuladores de eventos ou controlar a visibilidade. Estas directivas permitem aos programadores manipular eficazmente a interface do utilizador, especificando as alterações pretendidas na própria sintaxe do modelo.

As directivas estruturais do Angular modificam a disposição do Modelo de objectos do documento (DOM), enquanto as directivas de atributos afectam o aspeto visual ou as funcionalidades de elementos individuais no modelo. Essas diretivas oferecem um meio robusto de aprimorar os recursos dos aplicativos Angular, permitindo que os desenvolvedores personalizem e manipulem a marcação HTML com facilidade.

Benefícios das diretivas

A utilização de diretivas no Angular oferece uma variedade de vantagens, incluindo maior flexibilidade e controle sobre o comportamento do componente, bem como melhor modularidade e organização do código. Ao aproveitar as diretivas, os desenvolvedores podem criar comportamentos personalizados para componentes que vão além dos atributos HTML básicos ou ganchos de ciclo de vida, permitindo maior expressividade e controle refinado sobre as interações da interface do usuário. Além disso, as directivas permitem um melhor encapsulamento e separação de preocupações dentro da aplicação, promovendo a reutilização e a manutenção em diferentes partes do projeto. De um modo geral, as directivas desempenham um papel essencial na definição da estrutura e da funcionalidade das aplicações Angular, fornecendo aos programadores ferramentas poderosas para criar interfaces de utilizador complexas e experiências de utilizador eficientes.

A reutilização é uma caraterística fundamental das directivas que permite a sua utilização em vários componentes, resultando numa maior eficiência ao reduzir a redundância e promover a consistência em todo o projeto.

A extensibilidade das directivas permite a adição de novas funcionalidades nos componentes, aumentando assim as suas capacidades e melhorando o desempenho geral.

A versatilidade oferecida pelas directivas permite a manipulação e personalização das propriedades e acções dos elementos, proporcionando aos programadores uma ampla liberdade criativa para construírem as suas aplicações de forma eficaz.

Configurando seu aplicativo Angular

Para estabelecer um projeto Angular, execute o seguinte comando no terminal para instalar a interface de linha de comando (CLI) do Angular:

 npm install -g @angular/cli

Após a instalação da interface de linha de comando (CLI) do Angular, é possível estabelecer um projeto Angular usando o comando a seguir:

 ng new custom-directives-app

A execução da instrução acima mencionada produzirá a geração de uma aplicação Angular designada por “custom-directives-app”.

Criando uma diretiva personalizada

Para criar diretivas personalizadas em um projeto Angular, é preciso primeiro estabelecer um arquivo TypeScript e designar uma classe que seja adornada com o decorador Directive.

O decorador @Directive é uma funcionalidade do TypeScript que permite a criação de directivas personalizadas. Para implementar essa funcionalidade, estabeleceremos um arquivo highlight.directive.ts dentro do diretório src/app . Dentro deste ficheiro, construiremos a diretiva personalizada conhecida como highlight .

Por exemplo:

 import { Directive } from "@angular/core";

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

A diretiva importada é derivada do módulo principal do Angular e é adornada com o decorador @Directive , que aceita um argumento que inclui uma representação orientada para objectos com um atributo seletor .

Neste caso, a definição da propriedade seletor para “[myHighlight]” permite aplicar esta diretiva aos seus modelos, anexando o atributo “myHighlight” a um elemento especificado.

A incorporação da diretiva na estrutura do modelo pode ser conseguida da seguinte forma:

 <main>
 <p myHighlight>Some text</p>
</main>

Adicionando comportamento à diretiva

Para manipular o Modelo de Objeto de Documento (DOM) usando uma diretiva, é preciso primeiro criar essa diretiva e obter uma instância da ElementRef do pacote @angular/core . Esta referência serve como um meio para associar comportamentos a elementos dentro do modelo.

Para utilizar o ElementRef numa diretiva, tem de ser incorporado na função de construtores da referida diretiva. ElementRef serve como um encapsulamento para um elemento nativo situado num ponto de vista específico.

Certamente, aqui está uma ilustração que demonstra o processo de anexar um comportamento a uma diretiva em Angular:

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

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

O construtor da classe HighlightDirective aceita um parâmetro ElementRef, que é fornecido automaticamente pelo Angular. Este ElementRef dá acesso ao elemento DOM correspondente.

Utilizando a propriedade this.element.nativeElement , é possível obter acesso ao elemento DOM original representado pelo parâmetro element . Subsequentemente, ao utilizar a propriedade style , é possível atribuir uma tonalidade azul clara como cor de fundo para o componente em questão. Consequentemente, qualquer elemento ao qual seja aplicada a diretiva myHighlight apresentará um fundo azul celeste.

Para tornar a diretiva operacional, é imperativo que importe e declare explicitamente a sua presença no ficheiro app.module.ts.

Por exemplo:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Agora você pode utilizar a diretiva myHighlight nos elementos constituintes dos seus componentes Angular.

 <main>
 <p myHighlight>Some text</p>
</main>

Para avaliar a funcionalidade de uma diretiva específica em um aplicativo, é recomendável implantar e executar o aplicativo no servidor de desenvolvimento designado usando uma interface de linha de comando. Para iniciar esse processo, navegue até o diretório apropriado onde o terminal reside e digite o comando especificado para execução. Isto permitir-lhe-á verificar se a diretiva está ou não a funcionar como pretendido.

 ng serve

Após a execução da instrução dada, dirija o seu navegador de Internet para " http://localhost:4200/ " para aceder a uma interface de utilizador que se assemelha muito à representação visual abaixo apresentada.

As directivas nativas do Angular permitem modificar o aspeto de um elemento aceitando valores específicos, no entanto, esta funcionalidade não é extensível a directivas personalizadas como “myHighlight”. Para retificar esta limitação, é possível implementar uma opção de configuração dentro da diretiva personalizada que permite a modificação dinâmica da cor de fundo do modelo com base no valor fornecido.

Para modificar o comportamento da diretiva highlight no Angular, é possível substituir o conteúdo do arquivo highlight.directive.ts pelo modelo fornecido. Isso resultará em uma renderização diferente dos elementos HTML que são correspondidos pelo seletor da diretiva.

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

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
     }
}

O código fornecido demonstra uma implementação de uma classe HighlightDirective em Angular, que possui um método setter identificado como ‘myHighlight’. O referido método aceita um único parâmetro de entrada do tipo string e está adornado com o decorador Input, permitindo-lhe receber o referido valor de cor do componente que o supervisiona.

Pode-se agora especificar a cor de fundo pretendida para o elemento com o atributo myHighlight fornecendo-lhe um valor.

Por exemplo:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>

Criando uma diretiva estrutural personalizada

Em passagens anteriores, você foi instruído sobre o processo de construção, imbuição de ações e implementação de diretivas de atributo personalizadas em um modelo. As directivas de atributo alteram a apresentação visual dos componentes DOM, enquanto as directivas estruturais modificam a composição dos elementos no DOM, adicionando, eliminando ou reposicionando-os.

O Angular oferece duas directivas estruturais fundamentais, nomeadamente ngFor e ngIf . A primeira itera através de uma matriz de itens e exibe um modelo correspondente para cada elemento, enquanto a segunda é responsável pela renderização condicional de elementos com base em critérios específicos.

Neste segmento, vamos desenvolver uma diretiva estrutural feita à medida que exibe uma funcionalidade semelhante à diretiva ngIf . Para isso, vamos criar um ficheiro condition.directive.ts .

No ficheiro condition.directive.ts, escreva este código:

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

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

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

    constructor(
 private template: TemplateRef<unknown>,

private viewContainer: ViewContainerRef

) {}
}

O presente fragmento de código permite a exposição condicional de componentes através da aplicação da diretiva “condition” a um elemento, acompanhada pela transmissão de um valor booleano do componente que o engloba.

a TemplateRef e a ViewContainerRef . O primeiro serve de referência ao modelo associado à diretiva, enquanto o segundo representa o contexto de renderização de vistas no qual as vistas das directivas serão renderizadas.

A ConditionDirective emprega uma expressão condicional, implementada através de uma declaração if-else , para avaliar os méritos do argumento que recebe. Se o referido argumento for válido, a construção gerará uma perspetiva fechada utilizando o modelo de desenho especificado com a ajuda da metodologia createEmbeddedView() inerente ao ViewContainerRef . Subsequentemente, a função renderView() associada a esta instância do contentor orquestrará a incorporação do ponto de vista recém-criado no Modelo de Objectos de Documento (DOM) do navegador.

Se a condição especificada não for cumprida, o comando utiliza o método clear() do ViewContainerRef para remover do documento todas as representações anteriores dentro do contentor de vistas.

A incorporação da diretiva requer a importação e o reconhecimento da sua presença no ficheiro de módulo da aplicação. Uma vez realizada, ela se torna acessível para uso dentro de construções de modelos.

A incorporação da extensão num modelo pode ser conseguida através da incorporação do fragmento de código fornecido, conforme demonstrado abaixo:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>

Agora você pode criar diretivas personalizadas

As diretivas personalizadas do Angular oferecem um meio poderoso de influenciar o Modelo de Objeto de Documento (DOM) e imbuir funcionalidades dinâmicas nas estruturas de modelo. Depois de se ter familiarizado com a criação e aplicação de atributos personalizados e directivas estruturais, está agora equipado para explorar totalmente o potencial do Angular.