Directivas personalizadas en Angular

Las directivas le permiten ampliar HTML. En esta lección, conocerá las directivas personalizadas y aprenderá a crear las suyas.

¿Qué es una directiva?

Las directivas cambian la apariencia o el comportamiento de los elementos del DOM. Angular proporciona directivas integradas como *ngIf y *ngFor.

Tipos de directivas

• Directivas de componentes
• Directivas de atributo: cambian la apariencia o el comportamiento
• Directivas estructurales: cambian la disposición, como *ngIf

Crear una directiva de atributo

Cree una directiva mediante Angular CLI:

ng generate directive highlight

ng generate directive highlight

Aplicar la directiva

Use la directiva como un atributo en su plantilla:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Lógica de la directiva

Las directivas contienen lógica que cambia los elementos del DOM. Por ejemplo, puede establecer dinámicamente el color de fondo.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Decorador @HostListener

Use @HostListener para responder a eventos en los elementos que utilizan su directiva:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() en directivas

@Input() le permite pasar datos a las directivas desde las plantillas:

@Input() defaultColor: string;

Resumen

Ha aprendido a crear y usar directivas personalizadas para mejorar sus aplicaciones de Angular. ¡Muy bien!