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(鈥榠nput鈥,) 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