Angular2 nos facilita agregar clases y modificar el estilos de los elementos en nuestros components mediante [class] y [style] binding.

Para este ejemplo usare materializecss  que permite asignar estilos a la aplicación y de paso tenga mejor look. Si no has usado materializecss no importa, lo importante de todo esto es que puedas modificar el aspecto visual de un elemento a partir de alguna lógica o estado de una propiedad del componente.

En el ejemplo modificar el template del componente peppapig.component.ts y agrego <a con las clases de materialize con css de materialize para darle un aspecto de tipo button y dependiendo de la propiedad “isdisabled” jugar a agregar o quitar la clase css.

 <a class="waves-effect waves-light btn">button</a>

[Class] binding:

Nos permite agregar una clase css en este ejemplo a partir de una condicion boolean, se agrega la clase “disabled” la sintaxis resultante:

[class.disabled] = “isdisabled”.

@Component({
 selector: 'peppapig-component',
 template: `
 <div class="row">
 
 <div class="col s12">
 <h2>{{welcome}}</h2>
 <a class="waves-effect waves-light btn" [class.disabled] = "isdisabled" >button</a>
 </div>
 </div>`,
 providers: [PeppaPigService]
})
export class PeppaPigComponent {

friends: string[];
 isdisabled: Boolean = false;
 welcome: string = "interpolation"

constructor(private _peppapigService: PeppaPigService) {

this.friends = this._peppapigService.getPeppaFriends();
 console.log(this.friends);
 }

El resultado es el siguiente button tiene la clase disabled y se visualiza de la siguiente forma:

Screen Shot 2016-05-22 at 10.18.46 PM

 

 

Para que se aplique la otra clase, debemos asignar el valor de disabled a false.

isdisabled: Boolean = false;

Style Binding

Es muy similar a class binding pero este nos permite agregar estilos en línea en un elemento, utilizaremos la misma propiedad de “isdisable” para la condición y dependiendo del estado de isdisabled el fondo sera gris o negro.

<div class="col s12" [style.backgroundColor] = "isdisabled ? 
'black' : 'gray'">

El codigo final será el siguiente:

import {Component} from 'angular2/core';
import {PeppaPigService} from '../services/peppapig.services';

@Component({
 selector: 'peppapig-component',
 template: `
 <div class="row">
 
 <div class="col s12" [style.backgroundColor] = "isdisabled ? 'gray' : 'blue'">
 <h2>{{welcome}}</h2>
 <input type="text" >
 <a class="waves-effect waves-light btn" [class.disabled] = "isdisabled" >
 
 class binding </a>
 <a class="waves-effect waves-light btn">style binding</a>
 </div>
 </div>`,
 providers: [PeppaPigService]
})
export class PeppaPigComponent {

friends: string[];
 isdisabled: Boolean = false;
 bigicon: Boolean = true;
 welcome: string = "Angular2 y Peppa Pig"
 age: string

constructor(private _peppapigService: PeppaPigService) {

this.friends = this._peppapigService.getPeppaFriends();
 console.log(this.friends);
 }
}

Screen Shot 2016-05-22 at 10.02.19 PM

 

 

 

 

 

Para descargar el codigo de ejemplo:
https://github.com/danywalls/components-con-angular2

Mas informacion en la documentacion oficial  https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings

Happy Angular!