Um dos pilares do Angular são as diretivas, mecanismos que permitem estender o comportamento dos elementos na árvore DOM. O Angular oferece um leque de diretivas prontas para uso, e você também tem a liberdade de construir diretivas personalizadas nesta arquitetura versátil.
O que são diretivas?
Diretivas são, em essência, blocos de código sob medida que o Angular emprega para modificar a conduta ou a representação visual de um elemento HTML. Elas habilitam a inclusão de ouvintes de eventos, a manipulação da estrutura do DOM, e o controle da exibição ou ocultação de elementos.
No Angular, encontramos dois tipos principais de diretivas: estruturais e de atributo. Diretivas estruturais atuam sobre a organização do DOM, adicionando, removendo ou alterando a posição dos elementos, enquanto diretivas de atributo se concentram em alterar a aparência ou o comportamento de um elemento específico. As diretivas representam uma forma robusta de ampliar as capacidades dos componentes Angular.
Benefícios das Diretivas
Confira alguns dos benefícios do uso de diretivas no Angular:
- Reutilização: Diretivas podem ser aproveitadas em vários componentes, poupando tempo e recursos no desenvolvimento.
- Extensibilidade: A funcionalidade das diretivas pode ser ampliada para incluir novos comportamentos, tornando seus componentes mais poderosos e adaptáveis.
- Flexibilidade: Diretivas proporcionam uma grande flexibilidade para modificar o comportamento ou a aparência de um elemento de diversas maneiras, facilitando a construção de aplicações complexas.
Configurando seu aplicativo Angular
Para iniciar um projeto Angular, instale a CLI do Angular com o seguinte comando no seu terminal:
npm install -g @angular/cli
Após a instalação da CLI do Angular, crie um novo projeto com o comando:
ng new custom-directives-app
Este comando criará um novo projeto Angular chamado “custom-directives-app”.
Criando uma diretiva personalizada
Com seu projeto Angular configurado, você pode dar início à criação de suas diretivas personalizadas. Crie um arquivo TypeScript e declare uma classe, decorada com o decorador `@Directive`.
O decorador `@Directive` é uma função TypeScript que permite criar diretivas personalizadas. Crie um arquivo chamado `destaque.directive.ts` dentro da pasta `src/app`. É neste arquivo que você desenvolverá sua diretiva de destaque.
Por exemplo:
import { Directive } from "@angular/core";
@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
O código acima importa o decorador `Directive` do módulo `@angular/core`. O decorador `@Directive` é aplicado à classe `HighlightDirective`, recebendo um objeto com a propriedade `selector`.
Neste exemplo, o `selector` é definido como `[myHighlight]`, o que possibilita aplicar esta diretiva aos seus templates adicionando o atributo `myHighlight` a um elemento.
Veja um exemplo de como utilizar esta diretiva em seus templates:
<main> <p myHighlight>Algum texto</p> </main>
Adicionando Comportamento à Diretiva
Agora que você criou sua diretiva, o próximo passo é adicionar um comportamento para que ela possa manipular o DOM. Para isso, você precisará do `ElementRef` do módulo `@angular/core`.
Você irá injetar `ElementRef` no construtor da diretiva. `ElementRef` é um encapsulamento em torno de um elemento nativo dentro de uma view.
A seguir, um exemplo de como adicionar um comportamento a uma diretiva:
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
Neste código, o construtor da classe `HighlightDirective` utiliza um parâmetro `ElementRef`, que é automaticamente injetado pelo Angular. O `ElementRef` fornece acesso ao elemento DOM subjacente.
Através da propriedade `this.element.nativeElement`, você acessa o elemento DOM nativo do parâmetro `element`. Em seguida, a cor de fundo do elemento é definida como azul claro através da propriedade `style`. Isso significa que qualquer elemento que utilizar a diretiva `myHighlight` terá o fundo na cor azul claro.
Para que a diretiva funcione corretamente, você precisa importá-la e declará-la no arquivo `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` em seus componentes Angular.
<main> <p myHighlight>Algum texto</p> </main>
Execute sua aplicação no servidor de desenvolvimento para testar se a diretiva está funcionando. Você pode fazer isso executando o seguinte comando no seu terminal:
ng serve
Após executar o comando, acesse `http://localhost:4200/` no seu navegador e você deverá ver uma tela similar à imagem abaixo.
As diretivas integradas do Angular aceitam valores para personalizar a aparência do elemento, mas a diretiva personalizada `myHighlight` não. Você pode configurar a diretiva para receber um valor que será utilizado para definir dinamicamente a cor de fundo do elemento.
Para isso, modifique o conteúdo do arquivo `destaque.directive.ts` para:
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) {
}
}
Neste código, a classe `HighlightDirective` possui um método setter chamado `myHighlight`. Este método utiliza um parâmetro `color` do tipo `string`. O método setter é decorado com o decorador `@Input`, o que permite passar o valor da cor para a diretiva a partir do componente pai.
Agora você pode controlar a cor de fundo passando um valor para a diretiva `myHighlight`.
Por exemplo:
<main> <p myHighlight="pink">Algum texto</p> </main>
Criando uma diretiva estrutural personalizada
Nas seções anteriores, você aprendeu como criar, adicionar comportamento e utilizar diretivas de atributos personalizadas em seus templates. Diretivas de atributos modificam a aparência de elementos DOM, enquanto diretivas estruturais adicionam, removem ou alteram a posição de elementos no DOM.
O Angular oferece duas diretivas estruturais embutidas: `ngFor` e `ngIf`. A diretiva `ngFor` repete um template para cada item em uma coleção (array), enquanto `ngIf` permite renderização condicional.
Nesta seção, você irá criar uma diretiva estrutural personalizada similar à `ngIf`. Para isso, crie um arquivo chamado `condicao.directive.ts`.
No arquivo `condicao.directive.ts`, insira 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
) {}
}
Este código permite a renderização condicional de elementos aplicando a diretiva `condition` e passando um valor booleano do componente pai.
No construtor da classe `ConditionDirective`, você injeta uma instância de `TemplateRef` e `ViewContainerRef`. `TemplateRef` representa o template associado à diretiva, e `ViewContainerRef` representa o contêiner onde o aplicativo renderiza as visualizações.
O método setter da classe `ConditionDirective` utiliza uma estrutura `if else` para avaliar o parâmetro `arg`. Se o parâmetro for verdadeiro, a diretiva cria uma view incorporada usando o template fornecido. O método `createEmbeddedView` da classe `ViewContainerRef` cria e renderiza a view no DOM.
Se o parâmetro for falso, a diretiva limpa o contêiner de visualização usando o método `clear` da classe `ViewContainerRef`. Isso remove quaisquer views que foram renderizadas anteriormente no DOM.
Após criar a diretiva, registre-a no seu projeto importando-a e declarando-a no arquivo `app.module.ts`. Depois disso, você poderá começar a usar a diretiva em seus templates.
Veja um exemplo de como usar a diretiva em seus templates:
<main> <p *condition="true">Olá!!!</p> </main>
Agora você pode criar diretivas personalizadas
Diretivas personalizadas no Angular oferecem uma forma eficaz de manipular o DOM e adicionar comportamento dinâmico aos seus templates. Você aprendeu como construir e utilizar atributos personalizados e diretivas estruturais em seus projetos Angular. Ao entender como criar e usar diretivas personalizadas, você poderá aproveitar ao máximo os recursos do Angular.