https://angular.io/docs/ts/latest/api/core/index/Input-var.html
To quote:
Angular automatically updates data-bound properties during change
detection.
If you need to do some processing on the input, look at the get and set.
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter
From the documentation, here is an example.
import { Component, Input } from '@angular/core';
@Component({
selector: 'name-child',
template: `
<h3>"{{name}}"</h3>
`
})
export class NameChildComponent {
_name: string = '<no name set>';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name() { return this._name; }
}
You don’t need to use an observable.