Angular 2 Part 4.1 - Property and Class Binding

In Part 4, we are going to demonstrate binding in Angular. There are 3 different ways that data can flow (bind):

1. JavaScript to HTML - Like we have been doing with property from our components.
2. HTML to JavaScript - Like a mouse click, hover or key press.
3. Both way - Like a text box that should stay in sync.

First, let me introduce Property Binding by adding an image. Property binding allows us to bind Component Properties to any DOM Element Properties. What we need to do is add [] into the DOM Element Properties. Any update to the Component Property value will update the DOM Property, but not vise versa - that's why it's "One way binding".

We add an image property into our model.

export class CarPart {
  id:number;
  name:String;
  price: number;
  description:String;
  inStock:number;
  image:String;
}

In our mocks.ts, we add image data.

export const CARPARTS : CarPart[] = [{ 
  "id":1,
  "name":"Super Tires",
  "price":2.0,
  "description":"These tires are the very best",
  "inStock":5,
  "image":"/images/example1.jpg"
},
{
  "id":2,
  "name":"Reinforced shocks",
  "price":4.99,
  "description":"Shock made from krytonite",
  "inStock":4,
  "image":"/images/example2.jpg"
},
{
  "id":3,
  "name":"Padded Seats",
  "price":2,
  "description":"Super soft scats for a smooth ride.",
  "inStock":0,
  "image":"/images/example3.jpg"
}] // Example of object

Here we add our images into car-parts.component.html.

<li *ngFor="let carPart of carParts">
  <h2>{{carPart.name | uppercase}}</h2>
  <img [src]="carPart.image">
  <p class="description">{{carPart.description}}</p>
  <p class="price">{{carPart.price | currency:"EUR":true}}</p>
  <p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in stock</p>
  <p *ngIf="carPart.inStock === 0">Out of stock</p>
</li>

Here are the additional Property Binding example:

• <div [hidden]="!user.isAdmin">Secret</div>
• <button [disable]="isDisabled">Purchase</button>
• <img [alt]="image.description">

Next, I am going to introduce Class Binding by adding CSS Class on featured product. Class Binding allows us to specify a CSS Class to add to a DOM Element if a Component Property is True.

We add a featured property into our model.

export class CarPart {
  id:number;
  name:String;
  price: number;
  description:String;
  inStock:number;
  image:String;
  featured:boolean;
}

In our mocks.ts, we add feature data. Only 1 product is featured.

export const CARPARTS : CarPart[] = [{ 
  "id":1,
  ...
  "featured":false
},
{
  "id":2,
  ...
  "featured":true
},
{
  "id":3,
  ...
  "featured":false
}] // Example of object

In our car-parts.component.css, we add featured class.

.featured{
  border: 1px solid black;
}

Here we add our feature CSS Class into car-parts.component.html.

<li *ngFor="let carPart of carParts" [class.featured]="carPart.featured">
  <h2>{{carPart.name | uppercase}}</h2>
  <img [src]="carPart.image">
  <p class="description">{{carPart.description}}</p>
  <p class="price">{{carPart.price | currency:"EUR":true}}</p>
  <p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in stock</p>  <p *ngIf="carPart.inStock === 0">Out of stock</p>
</li>

Here is the output where featured product's has border.

If carPart.featured is true, then featured class is added.

If carPart.featured is false, then featured class is removed.

The format for Class Binding is [class.'name if the CSS Class'] = Component Property.

To overwrite the whole class, you can use this format ['name if the CSS Class'] = Component Property.

Download Car Part Source:
https://github.com/htsiah/angular2-carparts