Cómo crear una directiva de atributos personalizada en Angular

En esta publicación, aprenderemos cómo crear directivas de atributos en Angular. Digamos que queremos cambiar el color de fondo de un elemento; En ese caso aplicaríamos la directiva de atributo al elemento.

Dhananjay Kumar Last Updated Feb 21, 2025 6min read

Las Directivas de Atributos se utilizan para cambiar el comportamiento, apariencia o aspecto de un elemento en una entrada de usuario o mediante datos del servicio. Esencialmente, hay tres tipos de directivas en Angular 2:

Componente
Directrices estructurales
Directivas de atributos

Directiva de creación de atributo

Empecemos creando la Directiva de Atributos. Para ello, necesitamos crear una clase y decorarla con @directive decoradores. Se puede crear una directiva de atributo sencilla para cambiar el color de un elemento como se muestra en la siguiente lista:

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);
    }
}

Mientras creamos una directiva de atributos para cambiar el color del elemento, ten en cuenta que no necesitamos crear una directiva de atributos nueva solo para cambiar el color; Los colores simples pueden cambiarse usando la asignación de propiedades. Sin embargo, la directiva de atributo que creamos cambiará el color de un elemento en este ejemplo. Hay algunos puntos importantes que recordar:

Importar módulos requeridos como Directive, ElementRef y Renderer desde Angular biblioteca central
Create a TypeScript class
Decora la clase con @directive
Establece el valor de la propiedad selector en @directive función de decorador. La directiva se utilizaba, usando el valor selector sobre los elementos.
En el constructor de la clase, inyecta ElementRef y objeto Renderer.

Estamos inyectando ElementRef en el constructor de la directiva para acceder al elemento DOM. También estamos inyectando Renderer en el constructor de la directiva para que trabaje con el estilo de elementos de DOM. Estamos llamando a la función setElementStyle del renderizador. En la función, pasamos el elemento DOM actual usando el objeto de ElementRef y asignando la propiedad de color style del elemento actual. Podemos usar esta directiva de atributos mediante su selector en AppComponent, como se muestra en la siguiente lista:

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

Usamos una directiva de atributos en un

elemento. Cambiará el color del texto del párrafo a rojo. Además, necesitamos declarar la directiva de atributos en el app.module.ts como se muestra en el siguiente listado:

Necesitamos importar la directiva
Tenemos que declarar la directiva

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 { }

Aquí estamos importando ChageColorDirective y también declarándola en app.module. Después de hacer esto, deberíamos poder usar la directiva de atributos en todos los componentes.

Entrada de usuario en la directiva de atributos

Puede que tengamos la obligación de aplicar una directiva de atributos basada en algunas entradas del usuario para cambiar el color del elemento cuando el usuario pasa el ratón sobre él o el ratón se queda suspendido sobre el elemento. Para ello, necesitamos:

capturar la entrada o acción del usuario, y
Aplica un color o un color transparente respectivamente.

En varias acciones del usuario, podemos llamar a diferentes métodos para gestionar las acciones del usuario. Para permitir métodos que manejen acciones del usuario como la entrada con el ratón, necesitamos decorar métodos con el @HostListener decorador. Podemos modificar directivas para gestionar la entrada del usuario, como se muestra en la siguiente lista.

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 probablemente puedas notar, hemos añadido dos métodos para gestionar las acciones de los usuarios. Al entrar y salir del ratón, cambiamos el color a rojo y azul respectivamente.

Pasar datos a la directiva con vinculación

Hasta ahora hemos codificado de forma fija el valor del color en la directiva. En esta siguiente sección, pasemos datos a la directiva con vinculación. Para vincular la directiva con los datos, usaremos el @Input() decorador y añadiremos una propiedad en la clase directiva:

@Input('chcolor') highlightColor: string;

La directiva de atributos puede usarse de la siguiente manera:

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

Reescribamos la directiva de atributos para obtener datos de la vinculación. El elemento al que se asignará la directiva de atributo pasará datos de color. Si el elemento no vincula datos de color a la vinculación de atributos, se usaría el color rojo por defecto.

Esta directiva puede recrearse como se muestra en el siguiente listado:

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 pasar datos mediante vinculación a la directiva de atributo, como se muestra en la siguiente lista:

  @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 creando un botón de opción y vinculando el valor del color del evento de clic del botón a la directiva de atributo. Podemos seleccionar un color desde el botón de opción y, al introducir el botón del ratón, el color se cambiaría al valor seleccionado.

En una aplicación real, podemos obtener datos de un servicio REST y vincular a una directiva de atributo.

Conclusión

En esta publicación aprendimos sobre las Directivas de Atributos en Angular, y las creamos para cambiar el comportamiento o la apariencia de un elemento, y vincularlo a los datos del elemento. Espero que esta publicación te resulte útil. ¡Gracias por leer!

Angular How To