how to reload/refresh the component view forcefully?
<p>in my application I have a json object which is hardcoded. that values are bound with the input controls in the view. but if i changes the values of the json object during some events, then those changes values are not getting reflected in the view/input controls? how do i forcefully reload/refresh the view?</p>

<p>please look the component below. In that the values which i have assigned inside the constructor gets reflected in the view during the load of the component.
based on some events on the parent component, the method LoadExtractorQueueDetails() is called and the same variable this.sampleData is being reset with some other values.</p>

<p>ideally i expect these values to be reflected in the view? but this doesn't seem to happen? 
why it is not happening? how do i reload/refresh the views ?</p>

<pre><code>import { Component, Input, OnInit } from '@angular/core'
import { FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector: 'extractorQueueDetails',
    directives: [FORM_DIRECTIVES],
    providers: [CacheDataService, HTTP_PROVIDERS],
    templateUrl: './HTML/Admin/ExtractorQueueDetails.html'
})
export class ExtractorQueueDetails {

    resultData: ExtractorQueueItem;
    sampleData: Sample;

    constructor() {
        console.log("ExtractorQueueDetails component is loaded");

        this.sampleData = { queueId: 123, name: "Krishnan" };
     }


    public LoadExtractorQueueDetails() {
        console.log("in LoadExtractorQueueDetails of ExtractorQueueDetails");

        this.sampleData = { queueId: 456, name: "Krishnan123" };

        console.log(this.sampleData);
    }
}
</code></pre>

<p>My HTML template is like below</p>

<pre><code>   &lt;input type="text" name="txtQueueID" class="form-control" id="txtQueueID" [(ngModel)]="sampleData.queueId" /&gt;
   &lt;input type="text" name="Description"  class="form-control" [(ngModel)]="sampleData.name" id="Description" /&gt;
</code></pre>