Angular7 - Directivas

Directivas en Angular es una clase js, que se declara como @directive. Tenemos 3 directivas en Angular. Las directivas se enumeran a continuación:

Directivas de componentes

Estos forman la clase principal que tiene detalles de cómo se debe procesar, instanciar y usar el componente en tiempo de ejecución.

Directivas estructurales

Una directiva de estructura se ocupa básicamente de manipular los elementos dom. Las directivas estructurales tienen un signo * antes de la directiva. Por ejemplo,*ngIf y *ngFor.

Directivas de atributos

Las directivas de atributo se ocupan de cambiar el aspecto y el comportamiento del elemento dom. Puede crear sus propias directivas como se explica en la siguiente sección.

¿Cómo crear directivas personalizadas?

En esta sección, analizaremos las directivas personalizadas que se utilizarán en los componentes. Las directivas personalizadas son creadas por nosotros y no son estándar.

Veamos cómo crear la directiva personalizada. Crearemos la directiva usando la línea de comando. El comando para crear la directiva usando la línea de comando es el siguiente:

ng g directive nameofthedirective 
e.g 
ng g directive changeText

Aparece en la línea de comando como se indica en el siguiente código:

C:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)

Se crean los archivos anteriores, es decir, change-text.directive.spec.ts y change-text.directive.ts y se actualiza el archivo app.module.ts.

app.module.ts

import { BrowserModule } from'@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from'./new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive';

@NgModule({ 
   declarations: [ 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

los ChangeTextDirectiveLa clase se incluye en las declaraciones del archivo anterior. La clase también se importa del archivo que se muestra a continuación:

change-text.directive

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

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

El archivo anterior tiene una directiva y también una propiedad de selector. Sea lo que sea que definamos en el selector, lo mismo tiene que coincidir en la vista, donde asignamos la directiva personalizada.

En la vista app.component.html, agreguemos la directiva de la siguiente manera:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>
<div style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>

Escribiremos los cambios en change-text.directive.ts archivo de la siguiente manera:

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive.";
   }
}

En el archivo anterior, hay una clase llamada ChangeTextDirective y un constructor, que toma el elemento de tipo ElementRef, que es obligatorio. El elemento tiene todos los detalles a los que elChange Text se aplica la directiva.

Hemos agregado el elemento console.log. El resultado del mismo se puede ver en la consola del navegador. El texto del elemento también se cambia como se muestra arriba.

Ahora, el navegador mostrará lo siguiente:

Los detalles del elemento sobre el que se da el selector de directiva en la consola. Dado que hemos agregado elchangeText directiva a una etiqueta span, se muestran los detalles del elemento span.