> For the complete documentation index, see [llms.txt](https://jorgeucano.gitbook.io/entendiendo-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-6-directivas/capitulo-5-directivas.md). # 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) : ![](/files/-Let0gg7wjd_FsO_9wSS) Ahora vamos de a poco.. arranquemos por el html ```

{{title}}

``` 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 ```typescript 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.** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-6-directivas/capitulo-5-directivas.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.