Embed Power BI report using Angular 10

[Anonymous]

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

[Anonymous · Accepted solution]

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.