Crearemos en este artículo algunos ejemplos de uso de directiva de atributos tal como se explica en la web de Angular.

Usando la propiedad host del decorador @Directive

Añadir, modificar o eliminar un atributo y eventos

Para añadir, modificar o eliminar un atributo, bastará con establecer el valor a dicho atributo. En algunos casos para eliminar el atributo del elemento podemos devolver el valor «null» ó «undefined». En el siguiente ejemplo usamos signal input para obtener los inputs con los que cambiamos el color del texto junto al evento click:

import { Directive, input } from '@angular/core';

@Directive({
    selector: '[afColor]',
    standalone: true,
    host: {
        '[style.color]': 'afColor()',
        '(click)': 'onClick()'
    }
})
export class ColorDirective {
    public afColor = input.required<string>();

    public onClick(): void {
        console.log('clicked!');
    }
}

Ejemplo de uso:

<button afColor="red">CLICK ME!</button>

En algunos casos debemos devolver «null» o «undefined» para que no se aplique el atributo, en este ejemplo sobre el «disabled»:

import { Directive, input } from '@angular/core';

@Directive({
    selector: '[afDisabled]',
    standalone: true,
    host: {
        '[attr.disabled]': 'afDisabled() ? afDisabled() : undefined'
    }
})
export class DisabledDirective {
    public afDisabled = input.required<boolean>();
}

De esta manera, cuando pongamos el valor de la directiva a «false», el atributo no se renderizará en el document HTML.

Botón deshabilitado:

<button [afDisabled]="true">CLICK ME!</button>

Renderiza: <button disabled="true">CLICK ME!</button>

Botón habilitado:

<button [afDisabled]="false">CLICK ME!</button>

Renderiza: <button>CLICK ME!</button> y no de la siguiente forma que no haría lo que pretendemos que haga: <button disabled="false">CLICK ME!</button>

Para selectores específicos

Si la directiva solamente se puede utilizar para determinadas etiquetas, deberemos modificar el selector para que funcione solamente para las designadas. En el siguiente ejemplo, la directiva anterior solo se puede usar en los botones y en los links:

import { Directive, input } from '@angular/core';

@Directive({
    selector: 'button[afColor], a[afColor]',
    standalone: true,
    host: {
        '[style.color]': 'afColor()'
    }
})
export class ColorDirective {
    public afColor = input.required<string>();
}

Usando los decoradores @HostBinding y @HostListener

Aquí hay ejemplos usando los decoradores, pero según Angular, siempre es preferible usar la propiedad host sobre los decoradores @HostBinding y @HostListener ya que estos decoradores están exclusivamente por compatibilidad con versiones anteriores.

Por otro lado, en la guía de estilo pone lo contrario, es decir, tienen preferencia los decoradores … ¿Como te has quedado? Sea cual sea la elección hay que ser consistente.

Te dejo aquí ejemplos con los decoradores de los ejemplos anteriores:

import { Directive, input, HostBinding, HostListener } from '@angular/core';

@Directive({
    selector: 'a[afBColor], button[afBColor]',
    standalone: true
})
export class ColorBindingDirective {
    public afBColor = input.required<string>();

    @HostBinding('style.color')
    public get color(): string {
        return this.afBColor();
    }

    @HostListener('click')
    public onClick(): void {
        console.log('clicked!');
    }
}
import { Directive, input, HostBinding } from '@angular/core';

@Directive({
    selector: '[afBDisabled]',
    standalone: true
})
export class DisabledBindingDirective {
    public afBDisabled = input.required<boolean>();

    @HostBinding('attr.disabled')
    public get disabled(): boolean | undefined {
        return this.afBDisabled() ? this.afBDisabled() : undefined;
    }
}

Resumen

Hemos visto algunos ejemplos de uso más habituales de la directiva de atributos de Angular. Sea utilizando la propiedad host del decorador @Directive, como los decoradores @HostBinding y @HostListener.

Como siempre tienes los ejemplos en el monorepo en github.