how to reload/refresh the component view forcefully?

[Navaneetha Krishnan S]

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?

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.

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 ?

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

My HTML template is like below

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

[Lucas Lacroix]

Change the values of the sampleData object instead of swapping out the sampleData object:

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

        this.sampleData.queueId = 456;
        this.sampleData.name = "Krishnan123" ;
        console.log(this.sampleData);
    }

​Then, you do not need to force a re-render as the binding engine will see the differences.

-Luke​

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Navaneetha Krishnan S]

Luke,

I tried with this, still it is not working. any other ideas?

I tried writing the changes object values into the console.log - I can see the changed values reflected there, but the view not getting refreshed

Krishnan

[Lucas Lacroix]

Try to reproduce the issue on plunkr. If you can, link the plunkr here.