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?
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
}
}