Explicación Signals

6.1. Directiva + Componente

Explicación

Una directiva personalizada nos permite crear un comportamiento reutilizable para cualquier elemento HTML.

Hemos creado la directiva resaltar, que aplica estilos al elemento donde se use.

Usamos Renderer2 porque Angular necesita una forma segura y multiplataforma de modificar el DOM.

Para utilizar la directiva en un componente standalone, debemos importarla en el array imports.

Finalmente, en la plantilla usamos la directiva como un atributo HTML:

<p resaltar>Texto</p>.

Trabajando

Partimos de flujo-if.components.ts

Uso de la directiva

import { Component, signal } from '@angular/core';
import { ResaltarDirective } from '../../directivas/resaltar.directive';

@Component({
  selector: 'app-flujo-if',
  standalone: true,
  imports: [ResaltarDirective],
  templateUrl: './flujo-if.component.html',
  styleUrl: './flujo-if.component.css',
})
export class FlujoIfComponent {
  edad = signal(0);
  actualizarEdad(v: string) { this.edad.set(Number(v)); }
}

Ahora la usamos en la plantilla del componente flujo-if.component.html

<h2 resaltar>Ejemplo con @if + Directiva resaltar</h2>

<input type="number" (input)="actualizarEdad($event.target.value)" />

@if (edad() < 18) {
  <p resaltar>Eres menor de edad.</p>
} @else {
  <p>Eres mayor de edad.</p>
}