Creating reports and dashboards | Stimulsoft community forum

Posted: **Thu Feb 07, 2019 12:59 pm**

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 :

  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

Posted: **Sun Feb 10, 2019 11:44 pm**

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.

Posted: **Mon Feb 11, 2019 7:24 am**

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

Posted: **Mon Feb 11, 2019 5:03 pm**

Hello, Barnaby.

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

Thank you.

Posted: **Mon Feb 11, 2019 5:31 pm**

Hi.it is not not solved

Posted: **Tue Feb 12, 2019 11:44 am**

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.

Posted: **Tue Feb 12, 2019 11:57 am**

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

Posted: **Wed Feb 13, 2019 1:30 am**

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();
};

Posted: **Wed Feb 13, 2019 7:38 am**

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

Posted: **Wed Feb 13, 2019 6:20 pm**

Hello,

Thank you for the provided solution.

Creating reports and dashboards | Stimulsoft community forum

Call component method from custom Viewer button (Angular)

Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)

Re: Call component method from custom Viewer button (Angular)