Como Criar Diretriz de Atributos Personalizadas em Angular

Neste post, aprenderemos como criar Diretivas de Atributo em Angular. Então, digamos que queremos alterar a cor de fundo de um elemento; Nesse caso, aplicaríamos a diretiva de atributo ao elemento.

Diretivas de Atributo são usadas para alterar o comportamento, aparência ou aparência de um elemento em uma entrada do usuário ou por meio de dados do serviço. Basicamente, existem três tipos de diretrizes em Angular 2:

1. Componente
2. Diretrizes estruturais
3. Diretrizes de atributos

Criar a primeira diretriz de Atributo

Vamos começar criando a Diretiva de Atributo. Para isso, precisamos criar uma aula e decorá-la com @directive decoradores. Uma diretiva simples de atributo para mudar a cor de um elemento pode ser criada, conforme mostrado na próxima listagem:

import { Directive, ElementRef, Renderer } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
 
    constructor(private el: ElementRef, private render: Renderer) {
        this.changecolor('red');
    }
 
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Enquanto criamos uma diretiva de atributo para mudar a cor do elemento, lembre-se de que não precisamos criar uma nova diretiva de atributo apenas para mudar a cor; cores simples podem ser alteradas usando a vinculação de propriedades. No entanto, a diretiva de atributo que criamos mudará a cor de um elemento neste exemplo. Há alguns pontos importantes para lembrar:

1. Importar módulos necessários como Directive, ElementRef e Renderer a partir de Angular biblioteca central
2. Create a TypeScript class
3. Decore a sala com @directive
4. Defina o valor da propriedade seletor na função @directive decorador. A diretiva seria usada, usando o valor seletor nos elementos.
5. No construtor da classe, injete ElementRef e objeto Renderer.

Estamos injetando ElementRef no construtor da diretiva para acessar o elemento DOM. Também estamos injetando o Renderer no construtor da diretiva para trabalhar com o estilo de elemento do DOM.  Estamos chamando a função setElementStyle do renderizador. Na função, passamos o elemento DOM atual usando o objeto ElementRef e definindo a propriedade de estilo de cor do elemento atual. Podemos usar essa diretriz de atributo pelo seletor no AppComponent, conforme mostrado na próxima listagem:

@Component(
    {
        selector: 'app-container',
        template: `<p chcolor>{{message}}</p>`
    })
export class AppComponent {

Usamos uma diretiva de atributos em um

elemento. Ele vai mudar a cor do texto do parágrafo para vermelho.  Além disso, precisamos declarar a diretiva de atributo no app.module.ts conforme mostrado na próxima listagem:

1. Precisamos importar a diretiva
2. Precisamos declarar a diretriz

app.module.ts

import { ChangeColorDirective } from './task/taskcolor.directive';
 
import { app_routing } from './app.routing';
import { DataService } from './shared/data.service';
 
@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, app_routing],
    declarations: [AppComponent, TasksComponent, HomeComponent, AddtaskComponent, ChangeColorDirective],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule { }

Aqui estamos importando o ChageColorDirective e também declarando-o no app.module. Depois disso, devemos ser capazes de usar a diretiva de atributo em todos os componentes.

Entrada do usuário na diretiva de atributos

Podemos ter a exigência de aplicar uma diretiva de atributo com base em algumas entradas do usuário para mudar a cor do elemento quando o usuário passa o mouse sobre ele ou o mouse paira sobre o elemento. Para isso, precisamos:

1. capturar entrada ou ação do usuário, e
2. Aplique uma cor ou uma cor transparente, respectivamente.

Em várias ações do usuário, podemos chamar diferentes métodos para lidar com as ações do usuário. Para permitir métodos de lidar com ações do usuário, como o mouse enter, precisamos decorar métodos com o decorador @HostListener decorador.  Podemos modificar diretivas para lidar com a entrada do usuário, conforme mostrado na próxima listagem.

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
        this.changecolor('red');
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        this.changecolor('blue');
    }
    private changecolor(color: string) {
 
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Como você provavelmente percebeu, adicionamos dois métodos para lidar com ações dos usuários. Ao entrar e sair do mouse, estamos mudando a cor para vermelho e azul, respectivamente.

Passar dados para a diretiva com vinculação

Até agora, codificamos de forma fixa o valor da cor para a diretiva. Nesta próxima seção, vamos passar dados para a diretiva com vinculação. Para vincular a diretiva com os dados, usaremos o @Input() decorador e adicionaremos uma propriedade na classe diretiva:

@Input('chcolor') highlightColor: string;

A diretiva de atributos pode ser usada da seguinte forma:

<p [chcolor]="color">{{message}}</p>

Vamos reescrever a diretiva de atributo para obter dados do binding. O elemento ao qual a diretiva de atributo será vinculada passará dados de cor.  Se o elemento não estiver vinculando dados de cor à vinculação de atributos, a cor padrão vermelha será usada.

Essa diretiva pode ser recriada conforme mostrado na próxima listagem:

import { Directive, ElementRef, Renderer, HostListener, Input } from '@angular/core';
 
@Directive({
    selector: '[chcolor]'
})
export class ChangeColorDirective {
    private _defaulColor = 'red';
    @Input('chcolor') highlightColor: string;
 
    constructor(private el: ElementRef, private render: Renderer) { }
 
    @HostListener('mouseenter') methodToHandleMouseEnterAction() {
 
        console.log(this.highlightColor);
        this.changecolor(this.highlightColor || this._defaulColor);
    }
    @HostListener('mouseleave') methodToHandleMouseExitAction() {
        console.log(this.highlightColor);
        this.changecolor(null);
    }
 
    private changecolor(color: string) {
        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Podemos passar dados por vinculação à diretiva de atributo, conforme mostrado na próxima listagem:

  @Component({
 selector: 'app-container',
 template: `
 <div>
     <input type="radio" name="colors" (click)="color='blue'">blue
     <input type="radio" name="colors" (click)="color='orange'">orange
     <input type="radio" name="colors" (click)="color='green'">green
 </div>
 <p [chcolor]="color">{{message}}</p>`
 })
 export class AppComponent {

Estamos criando um botão de acesso e vinculando o valor da cor no evento de clique do botão à diretiva de atributo. Podemos selecionar uma cor no botão de opção e, ao inserir o mouse, a cor será alterada para o valor selecionado.

Em uma aplicação real, podemos buscar dados de um serviço REST e vincular à diretiva de atributo.

Conclusão

Neste post, aprendemos sobre as Diretivas de Atributos em Angular, e as criamos para alterar o comportamento ou aparência de um elemento, vinculando-o aos dados desse elemento. Espero que você ache este post útil. Obrigado por ler!