6 - Directivas

Directivas

Las directivas son "atributos" que vamos a agregar a nuestro codigo...

Alguna vez usaron algun plugin o libreria que simplemente con agregar una palabra a nuestros input validaba algo, o creaba las letras de distinto color ???

NO? ENSERIO?

Bueno, supongamos que nunca nadie utilizo una libreria media rara que hiciera cosas por nosotros... y vamos a ver que es una directiva y como crear "directivas custom".

Para ello vamos a ver que es una directiva... recuerden que todo el código lo tenemos en el Git.

Primero les voy a mostrar el resultado (si es llamativo aproposito) :

Ahora vamos de a poco.. arranquemos por el html

<h1 [style.background]="'lime'" title-blue>
  {{title}}
</h1>

Bien, aca vemos claramente que "cambio" un poco nuestra UI, agregamos con unos corchetes unos parametros que cambiaron nuestro background ...

En realidad, los corchetes nos sirven para "bindear" lo que ponemos adentro con Angular... lo que hicimos es una "directiva" comun.. con un "Atributo" cambiamos nuestro background... lo que hacemos con esto es pasarle los parametros a nuestra webApp y cambiarle los parametros a nuestro gusto...

[ ] => le genera una referencia al elemento completo

style.background => hace referencia a lo que quiere obtener del elemento que obtuvimos.

=" 'lime' " => le asigna el color "lime" ... aca podriamos tener una variable bindeada para que haga el cambio que queramos dependiendo que vamos haciendo... pero con esto podemos ver que la directiva, obtiene una referencia del elemento en el que esta y luego modifica sus parametros para hacer un "custom" de lo que necesitamos.

No queda super lindo hacerlo así, ademas imaginate si lo tuvieras que hacer constantemente, se vuelve algo super tedioso... por lo tanto ahi aparece otra función que podemos utilizar...

Directivas personalizadas (CUSTOM Directives)

Las directivas personalizadas lo que hacen es generar directo una funcionalidad en base a un "atributo" ... en el caso de nuestro ejemplo es title-blue, pero claro nos falta un poco de código para poder entender esto...

title.blue.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[title-blue]' })
export class TitleBlueDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.fontSize = '50px';
       el.nativeElement.style.color = 'blue';
    }
}

Ahora si!! nos faltaba lo mas importante... ver porque tenia el tamaño y el color... aca esta, SI!!! lo se, es parecido al otro cierta parte... pero vamos a ver paso a paso.

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

Vamos a importar las cosas que necesitamos para trabajar...

Directive lo necesitamos para el Decoration, es quien va a definir que esto es una directiva ( tal como el de component, define que es un componente)...

ElementRef : es la refencia del elemento completo .. algo asi como hacer un "document.getElementById('ID')" y asignar eso a una variable...

Input : Permite que los datos fluyan de la expresión vinculante a la directiva...

@Directive({ selector: '[title-blue]' })

Aquí tenemos la directiva y el selector que decidimos darle.. esto luego se convierte en title-blue dentro del html

La declaración de la clase la voy a dejar de lado (ya deberias entender 100% que hace).

constructor(el: ElementRef)

En el constructor estamos trayendo la refencia del elemento, de esto se encarga Angular por nosotros, para que podamos manipularlo a nuestro gusto.

el.nativeElement.style.fontSize = '50px';
el.nativeElement.style.color = 'blue';

Y por ultimo, la manipulación final... aquí tenemos como vamos a modificar el element.. con nativeElement vamos a generar lo mismo que hicimos con los [ ] ( los corchetes ) en el html directo.

Luego el nativeElement es la asignación de la que hablamos... que va a tomar los "atributos" nativos del elemento... para entenderlo de una forma mas "facil" serian "los que podemos modificar por CSS" por ejemplo.

Y por ultimo tomamos el Style, para hacer la modificación del font-size y el color ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

//directivas custom
import { TitleBlueDirective } from './directives/title.blue.directive';

@NgModule({
  declarations: [
    AppComponent,
    // directives
    TitleBlueDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Por ultimo tenemos nuestro ya "amado" app.module.ts en el cual importamos nuestra directiva y la agregamos a declarations.

De esta forma vamos a poder generar Directivas a nuestra necesidad... recuerden que no tiene sentido escribir muchas reglas o cosas que vayamos replicando por todos lados... nuestros componentes son "encapsulados" por lo tanto o vamos a tener que agregar css a nuestro archivo global y luego copiar lo que necesitamos en el "codigo" .. o directamente podemos crear nuestra directiva para poder aprovechar el maximo poder de Angular.