Embed Power BI report using Angular 10

Anonymous — Wed, 29 Sep 2021 11:43:00 GMT

Hi All,

I am having a requirement to show the pages of power bi reports in the left side navigation bar in Angular 10 Application.

Please help me out with some solutions for this implementation.

Thanks

Re: Embed Power BI report using Angular 10

Anonymous — Mon, 04 Oct 2021 02:10:24 GMT

Hi @Anonymous

You can try this code to embed your Power BI report in your Angular application.

<powerbi-report [embedConfig] = {{ type: "report", id: "<Report Id>", embedUrl: "<Embed Url>", accessToken: "<Access Token>", tokenType: models.TokenType.Embed, settings: { panes: { filters: { expanded: false, visible: false } }, background: models.BackgroundType.Transparent, } }} [cssClassName] = { "reportClass" } [phasedEmbedding] = { false } [eventHandlers] = { new Map([ ['loaded', () => console.log('Report loaded');], ['rendered', () => console.log('Report rendered');], ['error', (event) => console.log(event.detail);] ]) } > </powerbi-report>

For reference: powerbi-client-angular

How to Embed a Bold BI Dashboard in an Angular Application

Here is the offical blog about embed Power BI report, you can choose to embed for orgnization or embed for customer by your requirement.

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

topic Embed Power BI report using Angular 10 in Developer

Embed Power BI report using Angular 10

Re: Embed Power BI report using Angular 10