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 c 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 5

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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="">

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

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?

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>