angular - how to reload/refresh the component view forcefully? -

in application have json object hardcoded. values bound input controls in view. if changes values of json object during events, changes values not getting reflected in view/input controls? how forcefully reload/refresh view?

please component below. in values have assigned inside constructor gets reflected in view during load of component. based on events on parent component, method loadextractorqueuedetails() called , same variable this.sampledata being reset other values.

ideally expect these values reflected in view? doesn't seem happen? why not happening? how reload/refresh views ?

import { component, input, oninit } '@angular/core' import { form_directives } '@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 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 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" /> 

update

after reviewing comment, outside of trying use changedetectorref object, think there might possibility worth trying. if want driven off of click event not inside current component, register component listen external click events, see if dom object clicked on parent child component. if is, component function fire. example plunker here.

in example assume child component 1 dom object in parent component row. leverages using viewchild object , hostlistener object. meat of event function code filtering down event you're looking for.

export class childcomponent {   private _exampeobject:igeneric;   @viewchild('childcomponent') component: elementref;    constructor(){     this._exampleobject = {       id:1,       name:"cyrus"     };   }    @hostlistener('document:click', ['$event.target']) onclick(obj) {     let incrementid = this._exampleobject.id + 1;     let adjustname = this._exampleobject.name + incrementid.tostring();     if(this.component.nativeelement.parentnode.parentnode === obj){       this._exampleobject = {         id: incrementid,         name: adjustname       }     }   } } 

---

i think part of problem approach problem. mention "parent" component calling "loadextractorqueuedetails()" method. implies component have shown "child" component. means somehow calling "child" method "parent", things weird. guess think changedetection falling apart because of approach.

i'm sure have reasons approach, if planning on using current implementation, use changedetectorref object. believe want use " markforcheck()" method of changedetectorref, might have change "changedetection" meta property in @component declaration use "changedetectionstrategy.onpush". worry though other things might go wrong due approach in general though.

instead of trying call "child" method "parent", instead leverage @input decorator , pass data directly "parent" component "child" component.

another approach move "child" method service , use observable in service. subscribe observable in child component. starting point how can found here.

also side note if example provided "child" component, recommend against using "providers" meta property in "child". want use "providers" meta property on highest level component. child components passed reference through dependency inject through child components constructor, details here. time should use "providers" meta property in child if want multiple instantiations of service.