ReBuild/Re-render Angular2 component when property is changed
<p>How to Implment this?</p>

<p><strong>My SubComponent</strong></p>

<pre><code> import {Component,Input,ngOnInit} from 'angular2/core';

@Component({
selector: 'my-component',
template: `
    &lt;div&gt;In child component - myAttr = {{ myAttr1 }}&lt;/div&gt;
`
})
export class MyComponent  {
  @Input() myAttr: number;
  myAttr1:number;
 ngOnInit()
 {
  this.myAttr1=this.myAttr*10;
 }

}
</code></pre>

<p><strong>Main Component</strong></p>

<pre><code>import {Component} from 'angular2/core';
import {MyComponent} from './sub.component';

@Component({
selector: 'my-app',
template: `
    &lt;my-component
        [(myAttr)]="myAttr"
    &gt;&lt;/my-component&gt;
    &lt;button (click)="onClick()"&gt;Click&lt;/button&gt;
`,
directives: [MyComponent]
})
export class AppComponent {
   myAttr: number = 1;

  onClick() {
    console.log('Click in the parent component');
    this.myAttr += 1;
  }
}
</code></pre>

<p>I need to update the value in each click. There should be a direct approach , else Angular2 team should think about this</p>