6. Directiva destacar

Comando que hemos utlizado

ng g directive directivas/resaltar

Archivos que nos genera

src/app/directivas/resaltar.directive.ts

Código original

Modificaciones

Código final:

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

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

  constructor(private el: ElementRef, private renderer: Renderer2) {
    // Aplica estilo al elemento de forma segura
    this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
    this.renderer.setStyle(this.el.nativeElement, 'font-weight', 'bold');
  }

}

Su uso en html:

<p resaltar>Hola mundo</p>