O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required