Events not firing in Angular Power BI Component

user_281730 0
Viewed 165

I am trying to use this angular component for power bi embedding. https://github.com/microsoft/powerbi-client-angular

It includes the ability to handle specific events. I have tried handling the events via the instructions in github and even directly initializing them, as per the code below, but none of them are firing.

this.reportObj.powerbi.embed(reportContainer, embedConfig);
const report = this.reportObj.getReport();
report.on('loaded', event => {
   console.log('Report loaded', event.detail);
   this.setContainerHeight();
});

I am specifically trying to track the "loaded" event as I need to resize the container once the report loads as I have no other way to track that.

Has anyone else had this issue and know how to solve?

power-bi-angular powerbi-embedded powerbi
1 Answers

As You are using the code from code github one of the approach is to simply add the function in event handler map.

eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
    ['loaded', (event) => { console.log('Report ',event)
      this.setContainer();}],
    [
      'rendered',
      () => {
        console.log('Report has rendered');
     ],
]);

Only embed config needs to be updated and no need of `this.reportObj.powerbi.embed .The problem with your code is that reportObj is to just access report properties but we can't update the embed. As you are using compoment you can direclty use getReport method by this.reportObj.getReport and it will run and no need of first line. Remove that line and it should work

user_120533970
Related