Cómo usar y crear directivas personalizadas en Angular

Original article: How to use and create custom directives in 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 cada vez que el compilador Angular las encuentre. Las directivas angulares mejoran la capacidad de los elementos HTML al adjuntar comportamientos personalizados al DOM.

Las directivas angulares se clasifican en tres categorías.

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

Directivas de Atributo

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 usan para ocultar o mostrar condicionalmente elementos DOM particulares. Angular proporciona muchas directivas de atributos integradas como NgStyle, NgClass, etc. También podemos crear nuestras propias directivas de atributos personalizadas para la funcionalidad deseada.

Directivas Estructurales

Las Directivas Estructurales son las encargadas de cambiar la estructura del DOM. Funcionan agregando o eliminando elementos del DOM, a diferencia de las directivas de atributos, que solo cambian la apariencia y el comportamiento del elemento.

Puede diferenciar fácilmente entre la directiva estructural y la de atributos mirando 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 los 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.

Usando directivas integradas de Angular

Hay muchas directivas integradas disponibles en Angular que puede usar fácilmente. En esta sección, usaremos dos directivas incorporadas 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.

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}"> Soy una directiva de atributo</p>

En el fragmento de código anterior, estamos agregando un fondo azul si el valor de la variable isBlue es true. Si el valor de la variable isBlue es falso, entonces 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.

<p *ngIf="show">Soy una directiva estructural</p>

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

Crear una directiva de atributos personalizada

Crear una directiva personalizada es como crear un componente Angular. Para crear una directiva personalizada, debemos reemplazar el decorador @Component con el decorador @Directive.

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

Crea un fichero app-highlight.directive.ts en la carpeta src/app y añade el siguiente fragmento de código.

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

@Directive({

    selector: '[appHighlight]'

})

export class HighlightDirective {

    constructor(private eleRef: ElementRef) {

        eleRef.nativeElement.style.background = 'red';

    }

}

Aquí, estamos importando Directive y ElementRef desde "@angular/core". La directiva proporciona la funcionalidad del decorador @Directive en el que proporcionamos su selector de propiedades a appHighLight para que podamos usar este selector en cualquier lugar de la aplicación. También estamos importando ElementRef que es responsable de acceder al elemento DOM.

Ahora, para que funcione la directiva appHighlight, debemos agregar nuestra directiva al arreglo de declaraciones en el archivo app.module.ts.

import ...;

import { ChangeThemeDirective } from './app-highlight.directive';

@NgModule({

declarations: [

AppComponent,

ChangeThemeDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Ahora vamos a usar nuestra directiva personalizada recién creada. Estoy agregando la directiva appHightlight en app.component.html pero puede usarla en cualquier parte de la aplicación.

<h1 appHightlight>Highlight Me !</h1>

El resultado 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 de atributos. El mismo enfoque se utiliza para crear la directiva estructural.

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

Crea un fichero app-not.directive.ts en la carpeta src/app y añade el siguiente código.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({

    selector: '[appNot]'

})

export class AppNotDirective {

constructor(

    private templateRef: TemplateRef<any>,

    private viewContainer: ViewContainerRef) { }

    @Input() set appNot(condition: boolean) {

        if (!condition) {

            this.viewContainer.createEmbeddedView(this.templateRef);

        } else {

            this.viewContainer.clear();        }

    }

}

En el fragmento de código anterior, estamos importando Directive, Input, TemplateRef y ViewContainerRef desde @angular/core.

Directive proporciona la misma funcionalidad para el decorador @Directive. El decorador Input se utiliza para la comunicación entre los dos componentes. Envía datos de un componente a otro mediante el enlace de propiedades.

TemplateRef representa la plantilla incorporada que se utiliza para instanciar las vistas incorporadas. Estas vistas incorporadas están vinculadas a la plantilla que se va a renderizar.

ViewContainerRef es un contenedor donde se pueden adjuntar una o más vistas. Nosotros podemos usar la función createEmbeddedView() para adjuntar la plantilla incorporada al contenedor.

Ahora, para hacer que la directiva appNot funcione, necesitamos agregar nuestra directiva al arreglo de declaraciones en el app.module.ts.

import ...;

import { AppNotDirective } from './app-not.directive';

@NgModule({

declarations: [

AppComponent,

AppNotDirective

],

imports: [

...

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

Estoy agregando la directiva appNot en app.component.html pero puede usarla en cualquier parte de la aplicación.

<h1 *appNot="true">True</h1><h1 *appNot="false">False</h1>

La directiva *appNot está diseñada de tal manera que agrega el elemento de plantilla en el DOM si el valor de *appNot es false , justamente lo contrario de la directiva *ngIf.

El resultado 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.