2.5 - Directivas

Si alguna vez utilizaste AngularJS muchas cosas te seran conocidas, ahora si nunca utilizaste AngularJS no te hagas drama, tambien te pareceran conocidas.

Angular nos ofrece una serie de directivas para poder trabajar de una forma mas directa en nuestros templates, estas no tienen que se agregadas en nuestro componente, ni importadas, ni nada por el estilo, simplemente tenemos que utilizarlas donde las necesitamos y listo.

Las directivas son palabras "reservadas" que ejecutan funcionalidad en base a la directiva misma, o a datos que le enviemos.

  1. NgIf

  2. NgSwitch

  3. NgStyle

  4. NgClass

  5. NgFor

NgIf

En esta directiva, vamos a poner un valor ( puede ser una operación, una variable, una función) y en el caso de que sea VERDADERO va a mostrar el contenido del tag al que se lo hayamos puesto, en caso contrario lo escondera.

<div *ngIf="false"> Hola </div>                    <<< nunca se mostrara
<div *ngIf="a < b"> A es menor a b </div>          <<< se mostrara si y solo si  A es mayor a B
<div *ngIf=" str == 'yes'"> YES </div>             <<< Se mostrara si str es 'yes' 
<div *ngIf= "myFunct()"> HOLA </div>               <<< Se ejecuta si el retorno de la funcion es true

Si te diste cuenta ya, para las directivas de Angular vamos a tener que ponerle el '*' (asterisco) adelante.

NgSwitch

Algunas veces necesitamos renderear diferentes elementos dependiendo de una condición.

Cuando nos pase esto tendriamos con ngIf una forma de hacerlo =>

<div class="container">
    <span *ngIf="variable == 'A'"> la variable es A </span>
    <span *ngIf="variable == 'B'"> la variable es B </span>
    <span *ngIf="variable != 'A' && variable != 'B'> La variable no es ni A ni B </span>
</div>

Y se pone peor cuando tenemos mas posiblidades, como si tendriamos que comparar por C, D, E ...

<div class="container">
    <span *ngIf="variable == 'A'"> la variable es A </span>
    <span *ngIf="variable == 'B'"> la variable es B </span>
    <span *ngIf="variable == 'C'"> la variable es C </span>
    <span *ngIf="variable == 'D'"> la variable es D </span>
    <span *ngIf="variable == 'E'"> la variable es E </span>
    <span *ngIf="variable != 'A' && 
                 variable != 'B' && 
                 variable != 'C' && 
                 variable != 'D' && 
                 variable != 'E'> La variable no es ni A ni B </span>
</div>

Para este tipo de casos, Angular nos ofrece ngSwitch, si tal y como el nombre lo indica, es algo que vamos a poder entender facilmente ya que se basa en la funcionalidad del switch

<div class="container" [ngSwitch]="variable">
    <span *ngSwitchCase="'A'"> la variable es A </span>
    <span *ngSwitchCase="'B'"> la variable es B </span>
    <span *ngSwitchDefault> La variable no es ni A ni B </span>
</div>

En el caso de que tengamos que agregar nuevas posiblidades, nuestro código va a seguir siendo limpio:

<div class="container" [ngSwitch]="variable">
    <span *ngSwitchCase="'A'"> la variable es A </span>
    <span *ngSwitchCase="'B'"> la variable es B </span>
    <span *ngSwitchCase="'C'"> la variable es C </span>
    <span *ngSwitchCase="'D'"> la variable es D </span>
    <span *ngSwitchCase="'E'"> la variable es E </span>
    <span *ngSwitchDefault> La variable no es ni A ni B </span>
</div>

NgStyle

Con ngstyle podemos obtener el elemento del DOM y agregarle las propiedades que queramos por medio de una expresion de Angular.

<div [style.background-color]="'red'">
    el background color es rojo
</div>

En este caso al style ( del tag en el que nos encontramos, osea al elemento del dom que pertenece ) le agrega un background color red.

Hasta ahi no tendria mucho sentido hacerlo, pero vamos a avanzar un poco mas con las funcionalidades de ngstyle.

<div [NgStyle]="{color: 'white', 'background': 'red' }">
    Texto blanco, fondo rojo
</div>

Pero esto parece muy "sucio" es como volver a los 90 cuando haciamos "style in line", pareceria mucho mejor agregar una clase con esos estilos, ahora que pasa cuando esto lo "bindeamos" a una variable, aps!! ahora cambia todo no?

<h4>
    ngStyle con el objeto y su propiedad desde una variable
</h4>

<div>
    <span [ngStyle]="{color: color}">
        Hola, soy la variable {{color}}
    </span>
</div>

<h4>
    Style desde una variable directa
</h4>

<div>
    <span [style.background-color]="color"
            style="color: white;">
        el background es {{color}}
    </span>
</div>

Al cual podriamos poner un boton para que cambie el color

aplicarColor(color:string):void{
    this.color = color;
}

Por lo tanto, cuando le ponemos una variable, ya podemos jugar con los estilos dependiendo de las necesidades de la webApp

esto nos lleva a la proxima directiva

NgClass

NgClass es la directiva que representa al atributo de la clase en el HTML (template) y esto puede generar que cambien los estilos dinamicamente en nuestro DOM.

Lo primero que podemos hacer con NgClass es pasaer un literal (string). El objeto espera una clase y un valor (verdadero o falso) para poder aplicar o no el estilo.

.fondo-rojo{
    background: red;
}

Ahora vamos a ver como impactaria en distintos divs.

<div [ngClass]="{ fondo-rojo : false }"> Este fondo NO es rojo nunca</div>
<div [ngClass]="{ fondo-rojo : true }"> Este ondo siempre sera rojo </div>

Otra alternativa es definir un objeto en nuestro componente:

export class NgClassApp{
    esRojo: boolean;
    classesObj: Object;
    classList: string[];
}

Y en nuestro HTML:

<div [ngClass]="classesObj">
    Usando un objeto {{ classesObj.background ? "ON":"OFF" }}
</div>

Otro caso seria poniendole el estilo directo

<div [ngClass]="['background-red', 'redondeado']">
    bacground red y bordes redondeados
</div>

O podriamos declararlo en un array y ponerlo directo

this.classListStyle = [background-red', 'redondeado'];
<div [ngClass]="classListStyle">
    Este background {{classListStyle.indexOf('roja-background') > -1 "" : "no"}} es rojo
    Este div {{classListStyle.indexOf('redondeado') > -1 "" : "no"}} es redondeado
</div>

De esta forma vamos a poder ir jugando con nuestro estilos directamente.

NgFor

NgFor es nuestra directiva iteradora, es como un foreach, pero con la diferencia que va a iterar en nuestro template, y generar variables con 'let' para que sean unicas y se liberen en el momento

Si tenemos un array de colores:

this.colorArray = ['rojo', 'blanco', 'verde', 'azul'];

Lo que deberiamos hacer para iterarlos en nuestro Template es lo siguiente:

<ul>
    <li *ngFor="let color of colorArray">
        {{color}}
    </li>
</ul>

De esta forma vamos a tener una serie colores iterados... si tan simple como poner esa linea y los "<li>" se repetiran.

Ahora, que pasa si queremos iterar un array de objetos que vinieron de nuestro backend por ejemplo:

this.tickets = [
    { id: 1, name: 'no me funciona la impresora', state:'in progress'},
    { id: 2, name: 'no me funciona el mouse', state:'open'},
    { id: 3, name: 'no me funciona el office', state:'close'},
    { id: 4, name: 'no me funciona la impresora', state:'in progress'}
];

Ahora que tenemos nuestro array de objetos, vamos a iterarlo.

<div *ngFor="let ticket of tickets">
    <div class="container"> 
        <span class="col-md-3"> ID: {{ticket.id}} </span>
        <span class="col-md-6"> {{ticket.name}} </span>
        <span class="col-md-3"> {{ticket.state }} </span>
    </div>
</div>

Lo que vemos ahora, que "ticket" pasa a ser una variable que tiene el objeto que estamos iterando.. cada pasada va a obtener 1 de los objetos y lo va a iterar como el mismo, por lo tanto con el "." vamos a poder acceder a sus variables internas.

Previous2.4 - Estructura de una Angular WebAPPNext3 - Componentes

Last updated