Explicación Signals

6.2. Directiva versión avanzada

Una versión más avanzada podría ser con color configurarle y efecto hover opcional (al pasar el ratón)

Código final:

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

@Directive({
  selector: '[resaltar]'
})
export class ResaltarDirective implements OnInit {

  // Color principal (por defecto, rojo)
  @Input('resaltar') color: string = 'red';

  // ¿Resaltar también al pasar el ratón?
  @Input() resaltarHover: boolean = false;

  private colorOriginal: string | null = null;

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

  ngOnInit(): void {
    // Guardamos el color original para poder restaurarlo luego
    this.colorOriginal = this.el.nativeElement.style.color;

    // Aplicamos el estilo inicial
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
    this.renderer.setStyle(this.el.nativeElement, 'font-weight', 'bold');
  }

  // Cuando el ratón entra
  @HostListener('mouseenter')
  onMouseEnter() {
    if (this.resaltarHover) {
      this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
      this.renderer.setStyle(this.el.nativeElement, 'text-decoration', 'underline');
    }
  }

  // Cuando el ratón sale
  @HostListener('mouseleave')
  onMouseLeave() {
    if (this.resaltarHover) {
      this.renderer.setStyle(this.el.nativeElement, 'color', this.colorOriginal || '');
      this.renderer.removeStyle(this.el.nativeElement, 'text-decoration');
    }
  }
}

La importamos en el componente (ya estaba)

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(valor: string) {
    this.edad.set(Number(valor) || 0);
  }
}

La utilizamos en la plantilla

<h2 resaltar>Ejemplo @if + directiva resaltar (por defecto rojo)</h2>

<h3 [resaltar]="'blue'">Este título se resalta en azul</h3>

<p
  [resaltar]="'green'"
  [resaltarHover]="true">
  Pasa el ratón por encima de este texto
</p>

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

@if (edad() < 18) {
  <p [resaltar]="'orange'">Eres menor de edad.</p>
} @else {
  <p [resaltar]="'purple'" [resaltarHover]="true">
    Eres mayor de edad.
  </p>
}