Cómo crear directivas de atributo en Angular

Crear una directiva de atributo en Angular es una forma limpia y escalable de aplicar estilos y lógica a elementos del HTML. Aquí aprenderás, con claridad y paso a paso, cómo construir la directiva “resaltar” para destacar negocios con plan pagado, usando ElementRef, Renderer2, OnInit y Input. Ya venías usando ngSwitch, ngStyle y ngClass; ahora darás el salto a una directiva propia.

¿Cómo crear una directiva de atributo para resaltar en Angular?

Partimos del objetivo: resaltar negocios con plan “pagado” en la lista de lugares. El atributo se llama plan y puede ser “pagado” o “gratuito”. Ejemplos mencionados: la florería La Gardenia y el Hotel La Gracia, ambos con plan pagado.

• Crea la carpeta: directives dentro de app para mantener orden.
• Nombra el archivo: resaltar.directive.ts.
• Define un selector de atributo: se usará como [resaltar] en el HTML.

Código base de la directiva:

import { Directive, ElementRef, Renderer2, OnInit, Input } from '@angular/core';

@Directive({
  selector: '[resaltar]'
})
export class ResaltarDirective implements OnInit {
  @Input('resaltar') plan: string = '';

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    if (this.plan === 'pagado') {
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'yellow');
      this.renderer.setStyle(this.elRef.nativeElement, 'font-weight', 'bold');
    }
  }
}

¿Cómo ligar el plan con input y el selector?

• Usa @Input('resaltar') plan para enlazar el valor pasado al atributo [resaltar].
• El nombre entre comillas en Input debe coincidir con el selector.
• Inicializa la variable como cadena vacía: evita valores indefinidos.

¿Cómo nombrar carpetas y archivos para mantener orden?

• Carpeta descriptiva: directives dentro de app.
• Archivo descriptivo: resaltar.directive.ts.
• Mantén consistencia: facilita imports y lectura del equipo.

¿Qué imports, decoradores y ciclo de vida necesita la directiva?

La directiva requiere piezas clave de @angular/core para funcionar de forma segura y expresiva.

• @Directive: declara la directiva y su selector.
• OnInit / ngOnInit: ejecuta la lógica al inicializar el elemento.
• ElementRef: referencia al elemento nativo del DOM.
• Renderer2: aplica estilos y atributos de manera compatible con distintas plataformas.
• @Input: recibe datos desde el template (enlazado al selector).

¿Por qué usar renderer2 y elementref y no el dom directamente?

• Código seguro: evita manipulación directa del DOM.
• Portabilidad: mismo código funciona en distintas plataformas.
• Claridad: separa la referencia del elemento del modo de estilizarlo.

¿Qué estilos aplica la directiva cuando el plan es “pagado”?

• Fondo amarillo: background-color: yellow.
• Texto en negritas: font-weight: bold.
• Condición simple: if (this.plan === 'pagado') {...}.

¿Cómo registrar e implementar la directiva en el módulo y template?

Para usar la directiva en la app, debes declararla en el módulo y aplicarla en el template.

• Declara en el módulo: agrega ResaltarDirective a declarations en app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ResaltarDirective } from './directives/resaltar.directive';

@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

• Usa en el template: enlaza el plan de cada lugar al atributo [resaltar].

<li *ngFor="let lugar of lugares" [resaltar]="lugar.plan">
  {{ lugar.nombre }}
</li>

• Resultado esperado: los negocios con plan “pagado” quedan con fondo amarillo y texto en negritas.
• Próximos temas: host listeners y host binders para eventos y enlaces al host.

¿Te gustaría ver variantes con clases utilitarias o más atributos dinámicos? Cuéntame en comentarios qué te interesa profundizar y en qué parte te gustaría más ejemplos.