Call component method from custom Viewer button (Angular)

[mrapi]

Hi
Using Angular 6,I've added a custom button to viewer but I'm not able to call component method from it,I got

core.js:1598 ERROR TypeError: this.myMethod is not a function
the code used :

Code: Select all

  ngOnInit() {

    var report = new Stimulsoft.Report.StiReport();
    report.loadFile("reports/Report.mdc");
    this.viewer.report = report;
    this.viewer.renderHtml("viewer");


 const userButton = this.viewer.jsObject.SmallButton('userButton', 'MyButton', 'emptyImage');
        userButton.action = function () {
          alert('ok');
		  this.myMethod();
        };
        const toolbarTable = this.viewer.jsObject.controls.toolbar.firstChild.firstChild;
        const buttonsTable = toolbarTable.rows[0].lastChild.lastChild;
        const userButtonCell = buttonsTable.rows[0].insertCell(0);
        userButtonCell.className = 'stiJsViewerClearAllStyles';
        userButtonCell.appendChild(userButton);


     }

myMethod(){
	
	alert('call myMethod') ;
}

sample project is attached
thanks

[Barnaby]

this is a keyword in javascript, and it changes depending on where its being called from.

In your case, this is being called inside userButton.action, so this would probably be the object userButton.

If your function is global, you don't need to use this, otherwise you could do something like userButton.myMethod = myMethod; then using this would work.

[mrapi]

Hi.
without 'this' got this error:

Cannot find name 'myMethod'

angular 2+ uses typescript and it is very strict about calling global functions/variable

thanks

[HighAley]

Hello, Barnaby.

Did you solve your issue?
Let us know if you still need our help.

Thank you.

[mrapi]

Hi.it is not not solved

[HighAley]

Hello.

Did you try this solution:

this is a keyword in javascript, and it changes depending on where its being called from.

In your case, this is being called inside userButton.action, so this would probably be the object userButton.

If your function is global, you don't need to use this, otherwise you could do something like userButton.myMethod = myMethod; then using this would work.

Thank you.

[mrapi]

Hi
yes,but got this error: Cannot find name 'myMethod'

[Barnaby]

I've not really used typescript before. Is this.myMethod available in ngOnInit?
If so you should be able to do this

Code: Select all

userButton.myMethod = this.myMethod;
userButton.action = function () {
   alert('ok');
   this.myMethod();
};

[mrapi]

Hi,now I've seen your complete code,it works,one mention: if inside component method there are used other members,all must be assigned to button:

Code: Select all

 userButton.myMethod = this.myMethod;
 userButton.bsModalRef = this.bsModalRef;
 userButton.outResult = this.outResult;
..
myMethod(){
this.bsModalRef.hide();
    this.outResult.next(true);
}

Thanks

[Lech Kulikowski]

Hello,

Thank you for the provided solution.