Angular 2. Formularios. Entrega 3: Templates (2). Binding de Atributos, clases, estilos y eventos

Para no set tan enfarragosos como en la entrada anterior, solo veremos los bindings de los atributos, clases, estilos y eventos.

1. Binding de Atributos

Como ya vimos, hacer attribute binding es una excepción. Es decir, es mejor cambiar las PROPIEDADES del DOM que los atributos HTML.

Solamente, deberemos utilizar attribute binding cuando NO EXISTA dicha propiedad del DOM disponible para ser cambiada.

Como ejemplos de estos atributos tenemos: ARIA, SVG, y "table span". Son atributos puros y no existen propiedades a las que se pueda hacer un bind.

Si queremos pues cambiar dichos atributos, no se pueden colocar directamente si no a través de prefijo att seguido de un punto (.) y el nombre del atributo. Veamos un ejemplo

<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
  -->

  <tr><td>Five</td><td>Six</td></tr>
</table>

Aquí observamos que el texto entre comentarios que daría un error ya que NO encuentra la propiedad del DOM colspan.

Otro ejemplo vemos como cambiatr atributos de ARIA.

<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

2. Binding de clases.

Podemos asignar clases de 2 maneras:

1. Asignando [class]="variable que guarda el nombre de la clase".
2. Asignando [class.nombreClase]="variable booleana que activa o desactiva"

En el primer caso asignamos un único valor de clase, resetando otros valores de clase asignados previamente, mientras que en el segundo caso, si la variable booleana toma el valor false, desasignamos dicha clase (y en caso contrario la asignamos).

Veamos el primer caso

<!-- reset/override all class names with a binding  -->
<div class="bad curly special"
     [class]="badCurly">Bad curly</div>

Para el segundo caso

<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
     [class.special]="!isSpecial">This one is not so special</div>

Para manejar múltiles clases al mismo tiempo es aconsejable utilizar la directiva NgClass.

3. Binding de estilos.

Se definen asignando  [style.style.property]="expresión que devuelve un string"
Veamos ejemplos:

<button [style.color] = "isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

Pero se prefiere la directiva NgStyle.

4. Binding de eventos

Esta parte es un poco mas complicada. Aquí lo que se pretende es avisar al componente que se ha producido un evento, y la respuesta será ejecutar una función del componente.

Se  pueden utilizar en principio 2 nomenclaturas:

1.  (evento)="funcion_del_Componente() o expresión"
2.  on-evento="funcion_del_Componente() o expresion"

Siendo evento, el nombre del evento del elemento del DOM principalmente, o de una directiva. En un botón sería "click".
Veamos los ejemplos:

<button (click)="onSave()">Save</button>

<button on-click="onSave()">On Save</button>

OJO: Angular mira primero si existe un evento con el mismo nombre de una directiva, y si lo encuentra le da prioridad. Se verá mas adelante.

4.1 $event 

En un binding de evento, Angular establece un manejador de eventos (event handler) para el evento específico.

Cuando salta el evento, se ejecuta una función del componente, pero la información relacionada con el evento se guarda en un objeto llamado $event.

Si el evento es un evento nativo del DOM, entonces $event será del tipo evento del DOM, peró si el evento es de una directiva, el objeto será del tipo que haya definido internamente la directiva.

Veamos un ejemplo del primer caso, donde se actualiza el firstname del Hero a medida que escribimos.

<input [value]="currentHero.firstName"
       (input)="currentHero.firstName=$event.target.value" >

4.2 Eventos personalizados con EventEmitter

Para crear un evento en un componente, este evento debe ser del tipo EventEmitter. A continuación hay que crear una función (que se hace referencia en el template) que contenga el método "emit" con un parámetro.

En el ejemplo creamos un objeto deleteRequest del tipo EventEmitter<Hero>. Y el <Hero> determina el tipo de parametro a pasar al método emit.

// This component make a request but it can't actually delete a hero.
deleteRequest = new EventEmitter<Hero>();

delete() {
  this.deleteRequest.emit(this.hero);
}

Y en el template, habrá un botón que activará la función delete con el evento click que "emitirá un objeto de tipo "Hero".

<button (click)="delete()">Delete</button>

Pero por otra parte, tal como se dice en la información de angular2, podria haber un componente padre que hace un bind al objeto deleteRequest de nuestro componente anterior y recoge el objeto tipo Hero que se ha emitido con el método emit (a traves de $event) para proponer su borrado.

<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>