Cómo usar y crear directivas personalizadas en Angular

Después de jugar con Angular durante mucho tiempo, finalmente se me ocurrió una explicación comprensible de las directivas de Angular. En este artículo, primero entenderemos qué es exactamente una directiva y cómo usarla en Angular. También crearemos nuestras propias directivas personalizadas. entonces que estamos esperando ' Profundicemos en ello.

¿Qué es una directiva angular?

Las directivas son las funciones que se ejecutarán siempre que el compilador Angular las encuentre . Las directivas angulares mejoran la capacidad de los elementos HTML al adjuntar comportamientos personalizados al DOM.

Desde el concepto central, las directivas angulares se clasifican en tres categorías.

  1. Directivas de atributos
  2. Directivas estructurales
  3. Componentes

Directivas de atributos

Las Directivas de atributos son responsables de manipular la apariencia y el comportamiento de los elementos DOM. Podemos usar directivas de atributos para cambiar el estilo de los elementos DOM. Estas directivas también se utilizan para ocultar o mostrar elementos DOM particulares de forma condicional. Angular proporciona muchas Directivas de Atributo integradas como NgStyle , NgClass , etc. También podemos crear nuestras propias Directivas de Atributo personalizadas para nuestra funcionalidad deseada.

Directivas estructurales

Las Directivas Estructurales son responsables de cambiar la estructura del DOM. Funcionan agregando o quitando los elementos del DOM, a diferencia de las Directivas de atributos que simplemente cambian la apariencia y el comportamiento del elemento.

Puede diferenciar fácilmente entre la Directiva estructural y la Directiva de atributos observando la sintaxis. El nombre de la Directiva estructural siempre comienza con un prefijo de asterisco (*), mientras que la Directiva de atributos no contiene ningún prefijo. Las tres directivas estructurales integradas más populares que proporciona Angular son NgIf , NgFor y NgSwitch .

Componentes

Los componentes son directivas con plantillas. La única diferencia entre Componentes y los otros dos tipos de directivas es la Plantilla. Las directivas estructurales y de atributos no tienen plantillas. Entonces, podemos decir que el Componente es una versión más limpia de la Directiva con una plantilla, que es más fácil de usar.

Uso de directivas integradas angulares

Hay muchas directivas integradas disponibles en Angular que puede usar fácilmente. En esta sección, utilizaremos dos directivas integradas muy simples.

La directiva NgStyle es una directiva de atributo que se utiliza para cambiar el estilo de cualquier elemento DOM en función de alguna condición.

I am an Attribute Directive

En el fragmento de código anterior, agregamos un fondo azul si el valor de la isBluevariable es verdadero. Si el valor de la isBluevariable es falso, el fondo del elemento anterior será rojo.

La Directiva NgIf es una directiva estructural que se utiliza para agregar elementos al DOM de acuerdo con alguna condición.

I am a Structural Directive

En el fragmento de código anterior, todo el párrafo permanecerá en el DOM si el valor de la showvariable es verdadero; de lo contrario, se iniciará desde el DOM.

Creación de una directiva de atributos personalizados

Crear una directiva personalizada es como crear un componente angular. Para crear una directiva personalizada, debemos reemplazar @Componentdecorador con @Directivedecorador.

Entonces, comencemos con la creación de nuestra primera directiva de atributos personalizados. En esta directiva, vamos a resaltar el elemento DOM seleccionado estableciendo el color de fondo de un elemento.

Cree un app-highlight.directive.tsarchivo en la src/appcarpeta y agregue el fragmento de código a continuación.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Aquí, estamos importando Directivey ElementRefdesde Angular core. El Directiveproporciona la funcionalidad de @Directivedecorador en el que proporcionamos su selector de propiedad a appHighLightfin de que podamos utilizar esto en cualquier lugar del selector en la aplicación. También estamos importando el ElementRefque es responsable de acceder al elemento DOM.

Ahora, para que la appHighlightdirectiva funcione, debemos agregar nuestra directiva a la matriz de declaraciones en el app.module.tsarchivo.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Ahora vamos a utilizar nuestra directiva personalizada recién creada. Estoy agregando la appHightlightdirectiva en app.component.htmlpero puede usarla en cualquier lugar de la aplicación.

Highlight Me !

La salida del fragmento de código anterior se verá así.

Creación de una directiva estructural personalizada

En la sección anterior, creamos nuestra primera directiva Attribute. También se utiliza el mismo enfoque para crear la directiva estructural.

Entonces, comencemos con la creación de nuestra directiva estructural. En esta directiva, vamos a implementar la *appNotdirectiva que funcionará justo al revés *ngIf.

Ahora cree un app-not.directive.tsarchivo en la src/appcarpeta y agregue el código a continuación.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Como vio en el fragmento de código anterior, estamos importando Directive, Input, TemplateRef and ViewContainerRefdesde@angular/core.

Directiveproporciona la misma funcionalidad para el @Directivedecorador. El Inputdecorador se utiliza para comunicarse entre los dos componentes. Envía datos de un componente a otro mediante el enlace de propiedad.

TemplateRefrepresenta la plantilla incrustada que se utiliza para instanciar las vistas incrustadas. Estas vistas incrustadas están vinculadas a la plantilla que se va a renderizar.

ViewContainerRefes un contenedor donde se pueden adjuntar una o más vistas. Podemos usar la createEmbeddedView()función para adjuntar las plantillas incrustadas en el contenedor.

Ahora, para que la appNotdirectiva funcione, debemos agregar nuestra directiva a la matriz de declaraciones en el app.module.tsarchivo.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Ahora es el momento de utilizar nuestra directiva estructural recién creada.

Estoy agregando la appNotdirectiva en app.component.htmlpero puede usarla en cualquier lugar de la aplicación.

True

False

La *appNotdirectiva está diseñada de manera que agrega el elemento de plantilla al DOM si el *appNotvalor está falsejusto enfrente de la *ngIfdirectiva.

La salida del fragmento de código anterior se verá así.

Espero que este artículo haya respondido a la mayoría de sus preguntas sobre las directivas de Angular. Si tiene alguna consulta o duda, no dude en comunicarse conmigo en el cuadro de comentarios.