No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Conociendo las directivas

17/20
Recursos

Angular utiliza el concepto de directiva para cambiar la apariencia o el comportamiento de un elemento en el HTML. Acá estaremos conociendo las directivas.

Tu primera directiva

Para crear tu primera directiva, es necesario usar el CLI de Angular con el comando ng generate directive test-name o en su forma corta ng g d test-name.

Al igual que con los servicios y los pipelines, el comando CLI creará un archivo .ts con el código de tu directiva y un archivo .spec.ts para sus respectivas pruebas unitarias.

El CLI también actualizará el archivo app.module.ts importando la directiva en las declarations[]. No olvides de asegurarte que se esté importando correctamente. De lo contrario, Angular no reconocerá la directiva.

Las directivas por defecto tienen el siguiente aspecto:

import { Directive } from '@angular/core';

@Directive({
  selector: '[appTestName]'
})
export class TestNameDirective {
  constructor() { }
}

Utilizan el decorador @Directive() que contiene el nombre que utilizarás en el HTML para utilizar la directiva.

Manipulando estilos

En las directivas, puedes capturar el elemento HTML importando el servicio ElementRef y de esta manera poder cambiar los estilos de dicho elemento:

// directives/change-color.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {
  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.color = 'blue';
  }
}
<div>
    <p appChangeColor>Texto color azul.</p>
</div>

Escuchando eventos

Otra posibilidad que ofrecen las directivas, es la escucha de eventos. Haciendo uso del decorador @HostListener() e importado desde @angular/core puedes ejecutar una función cada vez que se produce un clic, hover, scroll o cualquier otro evento.

// directives/change-color.directive.ts
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {

  @HostListener('mouseenter') onMouseEnter() {
    this.element.nativeElement.style.color = 'blue';
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.element.nativeElement.style.color = '';
  }

  constructor(
    private element: ElementRef
  ) { }
}
<div>
    <p appChangeColor>Texto color azul al hacer hover.</p>
</div>

Pasando datos a una directiva

Finalmente, si tienes la necesidad de que tu directiva reciba algún tipo de valor, lo mejor es apoyarte en el decorador que ya conoces @Input().

// directives/change-color.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[appChangeColor]'
})
export class ChangeColorDirective {

  @Input() color!: string;

  constructor(
    private element: ElementRef
  ) {
    this.element.nativeElement.style.color = this.color;
  }
}
<div>
    <p appChangeColor [color]="'blue'">Texto color azul.</p>
</div>
<div>
    <p appChangeColor [color]="'red'">Texto color rojo.</p>
</div>
<div>
    <p appChangeColor [color]="'green'">Texto color verde.</p>
</div>

Puede ser algo difícil si recién estás comenzando con Angular imaginar un buen uso para una directiva propia. De momento, es importante saber que existen para poder implementarlas cuando llegue ese momento.

Ver código fuente del proyecto


Contribución creada con los aportes de Kevin Fiorentino.

Aportes 9

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Un ejemplo mas podria ser de utlizar una directica que escuche el evento error de una imagen si para luego poner a dicha imagen una imagen por default

@Directive( { selector: '[imageError]' } )
export class ImageErrorDirective {

//escucha el evento error
  @HostListener( 'error' )
  handleError (): void {
    this.elment.nativeElement.src = "https://www.sam-manipulados.com/wp-content/uploads/2014/01/default_image_01.png";
  }

  constructor(
    private elment: ElementRef<HTMLImageElement>
  ) {
    console.log( elment );
  }
}

//template
<img imageError width="100px" [src]="image" alt="">

Entonces las directivas se usan solo para modificar el DOM, pero no es recomendable hacer estas modificaciones al DOM de está manera según la documentación de Angular. Lo que quiere decir que no tiene mucha utilidad crear directivas.

Estoy en lo correcto?

Directivas

Las directivas se usan para modificar el DOM de forma directa y también se pueden modificar los atributos.

Aplicar cambios al nativeElement no se recomienda con hacer así.
Es mejor usar Render2

https://angular.io/api/core/Renderer2

DIRECTIVE

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @HostListener('mouseenter') onMouseEnter() {
    this.element.nativeElement.style.backgroundColor = 'red';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.element.nativeElement.style.backgroundColor = '';
  }

  constructor(
    private element: ElementRef
  ) {
    // this.element.nativeElement.style.backgroundColor = 'red';
  }

}

HTML

// insertarlo como un atributo dentro del elemento
<p appHighlight>{{ product.description }}</p>

En la pestaña recursos tienen mal el comando, suelo leerlo antes de ver el video y me confundió un poco.

Aplicando esta direcctiva puedes afectar los inputs directamente de un formulario es decir cambiar las palabras directamente.

import { Directive, ElementRef, HostListener } from@angular/core’;

@Directive({
selector: ‘[appOnlyNumbers]’
})
export class OnlyNumbersDirective {

@HostListener(‘input’,) onChangueinput(){
this.element.nativeElement.value = this.element.nativeElement.value.replace(/a/gi, “4”)
}

constructor(
private element: ElementRef
) {
// element.nativeElement.value = this.element.nativeElement.value.replace(/a/gi, “4”)
}

}

directivas son para modificar el DOM ng g d directives/hightlight

Conociendo las directivas

Las directivas son decoradores para modificar el DOM y atributos.

Creamos las directivas con la CLI: ng g d directives/highlight