Angular 2 Part 2.2 - Pipes & Methods

We use Pipes to transform data. A Pipes takes in data as input and transforms it to a desired output. Similar to Unix Pipe, if you are familiar with it.

Below example is to write car part names in capital letter.

@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <ul>
      <!-- carParts in an array object defined in AppComponent Class. -->
      <!-- carPart is a local variable. -->
      <li *ngFor="let carPart of carParts">
        <h2>{{carPart.name | uppercase}}</h2>
        <p>{{carPart.description}}</p>
        <p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in stock</p>
        <p *ngIf="carPart.inStock === 0">Out of stock</p>
      </li>
    </ul>
  `
})

Here are the additional Pipes to use.

• lowercase - Well, lowercase...
• date - Format dates, how you like them...
• number - Format numbers.
• decimal - Format decimal.
• replace - Create a new string, replacing specific character.
• slide - Create a new list or string containing a subset of the element.
• json - transform any input to a JSON formatted string.
• * You also can create a custom pipe.

Next example is to add a total car part using method() - totalCarParts().

First create totalCarParts() method in AppComponent class.

class AppComponent{
  title = "Ultra Racing",  // Example of property
  carParts = [{ ... }], // Example of object
  totalCarParts(){
    let sum = 0;
    for (let carPart of this.carParts) {
      sum += carPart.inStock;
    }
    return sum;
  }
}

Second display total car parts in template.

@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <p>There are {{totalCarParts()}} total parts in stock.</p>
    <ul>
      ...
    </ul>
  `
})

Enter command "npm start" to run the application.

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