Editor is giving me undefined on the onchange callback

[mariohmol]

Editor is giving me undefined on the onchange callback

[mariohmol]

Hi, do your class has implements OnInit ?

[naveencgr]

Yes, Below is my component class. i am able to see the Json Editor but when i insert/duplicate the node, i am getting that the this.editor undefined in change event.

export class AppComponent implements OnInit{
       public editorOptions: JsonEditorOptions;
       public data: any;

      @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
      template : {};
  
    ngOnInit() {
      this.template = {
      "forecast_date": {
        "label": "Forcast Date",
        "type": "date"
      }};
      this.editorOptions = new JsonEditorOptions();
     this.editorOptions.onChange= this.change;
  
     this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
   }

   change() {
     console.log("change:"+this.editor);//**this.editor is giving undefined**
    }

   ngAfterViewInit() {
    console.log("ngviewiniti : "+ this.editor.getText());//The values is coming here 
   }
}

[mariohmol]

Try this this.editorOptions.onChange= this.change.bind(this);

[naveencgr]

Yup, That worked. Thank you. Can you please explain me what the bind(this) will do?

[mariohmol]

bind set the this property to the scope from your clas.. so inside your change function.. you have this.editor , so now this in change will have the same value from this in ngOnInit.

I submitted a example with change as you have c57de45

Thanks!