Using the component in other components

We can use the about-page component in other components, as if it was a normal HTML tag. But the component is still boring, as it will always say that it shows the weather broadcast of Utrecht. We can mark the location property as an input. After that, location is an attribute that we can set from other components. It is even possible to bind it as a one-way binding. The Input decorator, which we are using here, needs to be imported just like Component:

import { Component, Input } from "angular2/core"; 
 
@Component({ 
  ... 
}) 
export class About { 
 @Input() 
 location: string = "Utrecht"; 
  collapsed = true; 
  show() { 
    this.collapsed = false; 
  } 
  hide() { 
    this.collapsed = true; 
  } 
 
  get encodedLocation() { 
    return encodeURIComponent(this.location); 
  } 
}