Como construir diretivas personalizadas em Angular

Um dos principais recursos do Angular são as diretivas. As diretivas angulares são uma forma de adicionar comportamento aos elementos DOM. Angular fornece uma variedade de diretivas integradas e você também pode criar diretivas personalizadas nesta estrutura robusta.

O que são diretivas?

Diretivas são códigos personalizados que o Angular usa para modificar o comportamento ou a aparência de um elemento HTML. Você pode usar diretivas para adicionar ouvintes de eventos, alterar o DOM ou mostrar ou ocultar elementos.

Existem dois tipos de diretivas integradas em Angular, estrutural e atributo. As diretivas estruturais alteram a estrutura do DOM, enquanto as diretivas de atributos alteram a aparência ou o comportamento de um elemento. As diretivas são uma forma poderosa de estender a funcionalidade dos componentes Angular.

Benefícios das Diretivas

Aqui estão alguns dos benefícios de usar diretivas em Angular:

• Reutilização: você pode usar diretivas em vários componentes, economizando tempo e esforço.
• Extensibilidade: você pode estender diretivas para adicionar novas funcionalidades, tornando seus componentes mais poderosos.
• Flexibilidade: usando diretivas, você pode modificar o comportamento ou a aparência de um elemento de várias maneiras, proporcionando muita flexibilidade ao criar seus aplicativos.

Configurando seu aplicativo Angular

Para configurar um aplicativo Angular, instale o Angular CLI executando o seguinte código em seu terminal:

npm install -g @angular/cli

Após instalar o Angular CLI, crie um projeto Angular executando o seguinte comando:

ng new custom-directives-app

Executar o comando acima criará um projeto Angular chamado aplicativo de diretivas personalizadas.

Criando uma diretiva personalizada

Agora você tem um projeto Angular e pode começar a criar suas diretivas personalizadas. Crie um arquivo TypeScript e defina uma classe decorada com o @Diretiva decorador.

O @Diretiva decorator é um decorador TypeScript usado para criar diretivas personalizadas. Agora crie um destaque.diretiva.ts arquivo no fonte/aplicativo diretório. Neste arquivo, você criará a diretiva personalizada destaque.

Por exemplo:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

O bloco de código acima importa o Diretiva decorador do @angular/núcleo módulo. O @Diretiva decorador decora o Diretriz Destaque aula. Toma um objeto como argumento com um seletor propriedade.

Neste caso, você define o seletor propriedade para [meu destaque] o que significa que você pode aplicar esta diretiva aos seus modelos adicionando o meu destaque atributo a um elemento.

Aqui está um exemplo de como usar a diretiva em seus modelos:

Some text</p>
</main>

Adicionando Comportamento à Diretiva

Agora você criou uma diretiva com sucesso. O próximo passo é adicionar um comportamento à diretiva para que ela possa manipular o DOM. Você precisará do ElementoRef de @angular/core para adicionar um comportamento a uma diretiva.

Você injetará ElementRef no construtor da diretiva. ElementRef é um wrapper em torno de um elemento nativo dentro de uma visualização.

Aqui está um exemplo de como você adiciona um comportamento a uma diretiva:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

Neste exemplo, o construtor do Diretriz Destaque class recebe um parâmetro ElementRef, que o Angular injeta automaticamente. O ElementRef fornece acesso ao elemento DOM subjacente.

Usando this.element.nativeElement propriedade, você acessa o elemento DOM nativo do elemento parâmetro. Em seguida, você define a cor de fundo do componente como azul claro usando o estilo propriedade. Isso significa que qualquer elemento que você aplique o meu destaque diretiva terá um fundo azul claro.

Para tornar a diretiva funcional, certifique-se de importá-la e declará-la no app.module.ts arquivo.

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]
})
exportclassAppModule{ }

Agora você pode aplicar a diretiva myHighlight aos elementos em seus componentes Angular.

Some text</p>
</main>

Execute seu aplicativo no servidor de desenvolvimento para testar se a diretiva está funcional. Você pode fazer isso executando o seguinte comando em seu terminal:

ng serve

Depois de executar o comando, navegue até http://localhost: 4200/ em seu navegador da web e você verá uma interface semelhante à imagem abaixo.

As diretivas angulares integradas aceitam valores para alterar a aparência do elemento, mas a diretiva personalizada meu destaque não. Você pode configurar a diretiva para aceitar um valor que será usado para definir dinamicamente a cor de fundo do modelo.

Para fazer isso, substitua o código no destaque.diretiva.ts arquivo com isto:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

No bloco de código acima, o Diretriz Destaque classe contém um método setter chamado meu destaque. Este método leva um cor parâmetro do tipo string. Você decora o método setter com o @Entrada decorador, permitindo que você passe o valor da cor para a diretiva do componente pai.

Agora você pode determinar a cor de fundo passando um valor para a diretiva myHighlight.

Por exemplo:

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

Criando uma diretiva estrutural personalizada

Nas seções anteriores, você aprendeu como criar, adicionar comportamentos e aplicar diretivas de atributos customizados ao seu modelo. As diretivas de atributos alteram a aparência dos elementos DOM, enquanto as diretivas estruturais adicionam, removem ou movem elementos no DOM.

Angular fornece duas diretivas estruturais, ngFor e ngSe. A diretiva ngFor renderiza um modelo para cada item em uma coleção (array), enquanto o ngSe lida com renderização condicional.

Nesta seção, você criará uma diretiva estrutural personalizada que funciona como o ngSe directiva. Para fazer isso, crie um condição.diretiva.ts arquivo.

No condição.diretiva.ts arquivo, escreva este código:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Este bloco de código permite renderizar elementos condicionalmente aplicando o doença diretiva para um elemento e passando um valor booleano do componente pai.

No construtor do CondiçãoDiretiva classe, você injeta uma instância de Referência do modelo e ViewContainerRef. O TemplateRef representa o modelo associado à diretiva e o ViewContainerRef representa o contêiner onde o aplicativo renderiza as visualizações.

O método setter de classe ConditionDirective usa uma instrução if else para verificar o parâmetro arg. A diretiva cria uma visualização incorporada usando o modelo fornecido se o parâmetro for verdadeiro. O criarEmbeddedView O método da classe ViewContainerRef cria e renderiza a visualização no DOM.

Se o parâmetro for falso, a diretiva limpa o contêiner de visualização usando o claro método da classe ViewContainerRef. Isso remove quaisquer visualizações renderizadas anteriormente do DOM.

Após criar a diretiva, registre-a em seu projeto importando-a e declarando-a no app.module.ts arquivo. Depois de fazer isso, você pode começar a usar a diretiva em seus modelos.

Aqui está um exemplo de como usá-lo em seus modelos:

"true">Hello There!!!</p>
</main>

Agora você pode criar diretivas personalizadas

As diretivas personalizadas no Angular fornecem uma maneira poderosa de manipular o DOM e adicionar comportamento dinâmico aos seus modelos. Você aprendeu como criar e aplicar atributos personalizados e diretivas estruturais em seus aplicativos Angular. Ao compreender como criar e usar diretivas personalizadas, você poderá aproveitar ao máximo os recursos do Angular.