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.
últimas postagens
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, estruturais e de atributos. 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 na construção de 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
A execução do comando acima criará um projeto Angular denominado custom-directives-app.
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 decorador @Directive.
O decorador @Directive é um decorador TypeScript usado para criar diretivas personalizadas. Agora crie um arquivo destaque.directive.ts no diretório src/app. Neste arquivo, você criará o destaque da diretiva personalizada.
Por exemplo:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
O bloco de código acima importa o decorador de diretiva do módulo @angular/core. O decorador @Directive decora a classe HighlightDirective. Leva um objeto como argumento com uma propriedade de seletor.
Neste caso, você define a propriedade do seletor como [myHighlight] o que significa que você pode aplicar esta diretiva aos seus modelos adicionando o atributo myHighlight a um elemento.
Aqui está um exemplo de como usar a diretiva em seus modelos:
<main>
<p myHighlight>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 ElementRef 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]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
Neste exemplo, o construtor da classe HighlightDirective usa um parâmetro ElementRef, que o Angular injeta automaticamente. O ElementRef fornece acesso ao elemento DOM subjacente.
Usando a propriedade this.element.nativeElement, você acessa o elemento DOM nativo do parâmetro element. Em seguida, você define a cor de fundo do componente como azul claro usando a propriedade style. Isso significa que qualquer elemento ao qual você aplicar a diretiva myHighlight terá um fundo azul claro.
Para tornar a diretiva funcional, certifique-se de 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 aplicar a diretiva myHighlight aos elementos dos seus componentes Angular.
<main>
<p myHighlight>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
Após executar o comando, navegue até http://localhost:4200/ em seu navegador 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 myHighlight 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 arquivo destaque.directive.ts por este:
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) {
}
}
No bloco de código acima, a classe HighlightDirective contém um método setter chamado myHighlight. Este método usa um parâmetro de cor do tipo string. Você decora o método setter com o decorador @Input, permitindo passar 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:
<main>
<p myHighlight="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 ngIf. A diretiva ngFor renderiza um modelo para cada item em uma coleção (array), enquanto a ngIf trata da renderização condicional.
Nesta seção, você criará uma diretiva estrutural personalizada que funciona como a diretiva ngIf. Para fazer isso, crie um arquivo condição.directive.ts.
No arquivo condição.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
) {}
}
Este bloco de código permite renderizar elementos condicionalmente aplicando a diretiva de condição a um elemento e passando um valor booleano do componente pai.
No construtor da classe ConditionDirective, você injeta uma instância de TemplateRef 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 método createEmbeddedView 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 método clear 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 arquivo app.module.ts. 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:
<main>
<p *condition="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.