Events not firing in power bi angular component

[gotters]

As per the instructions I have setup event handlers and assigned to the component but they are not firing.

Specifically I need the "loaded" event to fire so that I can resize my container accordingly.

I have tried passing events directly into the component as well as the following code below, but nothing is firing.

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

Occasionally if I modify my screen to a small size the loaded event will fire?

Please advise what might be going wrong.

Thanks

[gotters]

Thanks, have been through the docs you specified already. I was even trying to get the events to fire as per those docs and not relying on the component. But nothing is firing

[v-shex-msft]

HI @gotters,

I think this should be related to your setContainerHeight function, did this function defined by yourself? Can you please share some more detail about these?

How to Get Your Question Answered Quickly  

Here is the code snap from the embedded playground about change report layouts, you can take a look on it if helps:

Power BI Playground - Developer Sandbox

// Define default visual layout: visible in 400x300.
let defaultLayout = {
    width: 400,
    height: 250,
    displayState: {
        mode: models.VisualContainerDisplayMode.Hidden
    }
};

// Define page size as custom size: 1000x580.
let pageSize = {
    type: models.PageSizeType.Custom,
    width: 1000,
    height: 580
};

// Page layout: two visible visuals in fixed position.
let pageLayout = {
    defaultLayout: defaultLayout,
    visualsLayout: {
        "VisualContainer1": {
            x: 70,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        },
        "VisualContainer3": {
            x: 540,
            y: 100,
            displayState: {
                mode: models.VisualContainerDisplayMode.Visible
            }
        }
    }
};

let settings = {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: pageSize,
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: {
            "ReportSection600dd9293d71ade01765": pageLayout
        }
    },
    panes: {
        filters: {
            visible: false
        },
        pageNavigation: {
            visible: false
        }
    }
}

// Update the settings by passing in the new settings you have configured.
try {
    await report.updateSettings(settings);
    console.log("Custom layout applied, to remove custom layout, reload the report using 'Reload' API.");
}
catch (error) {
    console.log(error);
}

In addition, if you mean to change the embedded iframe size, I think you should change the iframe element style that you bind to the embedded container instead of internal contents.

Regards,

Xiaoxin Sheng

[gotters]

Thanks for the reply. It has nothing to do with my function. For testing I removed my function and just put a console.log - the events are just not firing. Is there any way I can track down what's happening to those events?

[v-shex-msft]

Hi @gotters,

I suppose these functions not binding correctly, you can also take a look at the following link about the official document to handle the events:

How to handle events in a Power BI embedded analytics application | Microsoft Docs

Regards,

Xiaoxin Sheng