interpolation pipes

[nasihere]

The parameter value can be any valid template expression such as a string literal or a component property. In other words, we can control the format through a binding the same way we control the birthday value through a binding.

Let's write a second component that binds the pipe's format parameter to the component's format property. Here's the template for that component: app/hero-birthday2.component.ts (template)

template: `
  <p>The hero's birthday is {{ birthday | date:format }}</p>
  <button (click)="toggleFormat()">Toggle Format</button>
`

We also added a button to the template and bound its click event to the component's toggleFormat method. That method toggles the component's format property between a short form ('shortDate') and a longer form ('fullDate').

app/hero-birthday2.component.ts (class)

export class HeroBirthday2 {
  birthday = new Date(1988,3,15); // April 15, 1988
  toggle = true; // start with true == shortDate

get format()   { return this.toggle ? 'shortDate' : 'fullDate'}

  toggleFormat() { this.toggle = !this.toggle; }
}