Angular 2. Entrega 9. Templates y directivas

Las templates son parte de los ficheros html (o sea no es javascript o ts). Segun Micael, permiten definir la vista en función del componente, permitiendo:

1. Visualización condicional
2. Repetetición de elementos.
3. Estilos.
4. Formularios

1. Visualización condicional, directiva ngIf

ngIf incluye el código entre "<>" si es verdadero. Puede ser asignado a un atributo que sea booleano, y siempre la cosa a comparar tiene que estar entre comillas dobles "".

En este caso si el atributo "visible" es verdadero, incluirá el código :

<p *ngIf="visible">Texto a mostrar</p>

En este otro caso, se puede usar una expresión,

<p *ngIf="num == 3">Texto a mostrar</p>

2. Repetición de elementos , directiva ngFor

Dado un array, definido normalmente en un component. Por ejemplo en app.component.ts añadimos la variable frutas

frutas = [{nombre:'manzana', color:'amarillo'},
          {nombre:'pera', color:'verde'},
          {nombre:'granada', color:'palido'},
          {nombre:'mandarina', color:'naranja'}];

ahora dentro del fichero app.component.html indicamos

<div *ngFor= "let fruta of frutas"> {{fruta.nombre}} </div>

3.Restricciones
No se pueden incluir 2 directivas estructurales (de tipo *) en el mismo elemento. Es decir son directivas que modifican el DOM. Esto estaría MAL

<li *ngFor "let fruta of frutas" * ngIf ="fruta.color=='naranja'"> {{fruta.nombre}}
</li>

Hay que usar la versión de las directivas sin el "sugar sintax" (*), en si versión extendidad con el elemento template (que no aparece en el DOM)

<template ngFor let-elem [ngForOf]="frutas">
  <li *ngIf="fruta.color==='naranja'"> {{fruta.nombre}}</li>
</template>

3. Estilos

Los estilos en CSS son globales, cosa que provoca colisiones.

Si queremos que los CSS sean GLOBALES, tenemos 2 opciones:
1. Indicarlo en el index.html.
2. Usar src/styles.css. El cual, angular-cli lo incluye de forma automática en index.html

Si queremos hacerlos  LOCALES se puede hacer:
1. Dar valor a las variables styles o stileUrls. Pero no se pueden utilizar los 2 a la vez !
2. También se puede tener de forma local  en el template, metiendo un elemento <style>

Veamos como se modican los estilos de un elemento:

1. Activar la clase de un elemento a un atributo de tipo string. En este caso tenemos un componente que tiene una variable llamada className que puede valer "blue".

<h1 [class]="className">Hola!"</h1>

2. Activar una clase concreta a un atributo boolean. Siendo

<h1 [class.blue]="blueActive">Hola!"</h1>

3. Asociar la clase de un elemento a un atributo de tipo mapa de string a boolean. Utilizamos la directiva ngClass que permite asociar mapas a las clases de un elemento.

<h1 [ngClass.blue]="pClasses">Hola!"</h1>

Donde en el componente se ha definido un mapa

pClasses: { 
  "red" : false,
  "bold": true
}
y un método para cambiar los valores:

changeParagraph () {
  this.pClasses.bold= true;
}


4. Asociar un estilo concreto de un elemento a un atributo.

<p [style.backgroudColor]="pColor">Hola"</p>

y se pueden meter unidades numéricas en estos casos:

<p [style.fontSize.em]="pSizeEm">Hola"</p>
<p [style.fontSize.%]="pSizePerc">Hola"</p>

y se pueden usar mapas de propiedad utilizando la directiva ngStile :

<p [ngStyle]="getStyles()">Hola"</p>

getStyles() {

  return {

    'font-style': this.canSave? 'italic':'normal,

    'font-weight:!this.isUnchanged? 'bold':'normal',

    'font-size':this.isSpacial? '24px':'8px',

  }