2. Componentes

Crearemos varios componentes para ir mostrando su uso por separado

Componente de if

ng g component components/flujo-if --standalone

Componente for

ng g component components/flujo-for --standalone

Componente switch

ng g component components/flujo-switch --standalone

Directiva resaltar, para hacer una directiva personalizada y ver cómo modificar un elemento del DOM

ng g directive directivas/resaltar

Retocamos la directiva para que lo ponga en negrita y rojo

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

@Directive({
  selector: '[resaltar]'
})
export class ResaltarDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    // Cambia el color del texto cuando se aplica la directiva
    this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
    this.renderer.setStyle(this.el.nativeElement, 'font-weight', 'bold');
  }
}