jqueryangulartypescriptng2-bootstrap

Open ng2-bootstrap-modal dialogservice from JavaScript


I have an Angular component like this:

export class TestComponent implements OnInit {
    @Input() TestData: TestObject[];
    constructor(private dialogService: DialogService) { }

    ngOnInit() {
        this.RenderTreeView();
        $('#treeviewStandard').treeview('collapseAll', { silent: true });
    }

    RenderTreeView() {
        $('#treeviewStandard').treeview({
            data: this.TestData,         
            onNodeSelected: function(event, data) {
                console.log(data);
                if (data.isOverlaid) {
                    //testPopup isnt opening ng2-bootstrap-modal since this is angular 2 function 
                    //and dialogService is unknown to javascript 
                    this.testPopup();
                }
            }
        });        
    }

    testPopup() {       
        this.dialogService.addDialog(PopupComponent, {
            majorObject: this.TestData,
            moduleType:"check"
        });
    }
}

I am trying to open ng2-bootstrap-modal popup in callback method onNodeSelected treeview, but testPopup() function cannot be called and it displays:

Cannot read property 'testPopup' of undefined.

Is there any way to call an Angular2 component function from JavaScript code? Or isn't my approach to generate treeview so much Angular way?


Solution

  • Try fat arrow => syntax instead of using function.

    onNodeSelected: (event, data) =>{
    
                console.log(data);
                if(data.isOverlaid)
                {
                        //testPopup isnt opening ng2-bootstrap-modal since this is angular 2 function 
                        //and dialogService is unknown to javascript 
                        this.testPopup();
                }
        }
    

    Alternatively you can store a this object in some variable and try it.

    var self = this;
    
    onNodeSelected: function(event, data) {
                    console.log(data);
                    if(data.isOverlaid)
                     {
                            self.testPopup();  // called using variable
                    }
    }