cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
srmv
Frequent Visitor

Embed Power BI report using Angular 10

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

1 ACCEPTED SOLUTION
RicoZhou
Community Support
Community Support

Hi @srmv 

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.

View solution in original post

1 REPLY 1
RicoZhou
Community Support
Community Support

Hi @srmv 

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.

View solution in original post

Helpful resources

Announcements
Power BI December 2021 Update_carousel 768x460.jpg

Check it Out!

Click here to read more about the December 2021 Updates!

Jan 2022 Dev Camp 768x460 copy.png

Power BI Dev Camp- January 27th, 2022

Mark your calendars and join us for our next Power BI Dev Camp!

UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Top Solution Authors