Category: Power Platform

Microsoft has announced a new component library for the Power BI which will work with the Angular Framework.

The Angular component is now live and available on npm and GitHub.

Check out the sample code below to see how to get started embedding Power BI in your Angular application.

IMPORTING THE LIBRARY

import { PowerBIEmbedModule } from 'powerbi-client-angular';
@NgModule({imports: [ PowerBIEmbedModule]})

EMBEDDING A POWER BI REPORT IN AN ANGULAR APPLICATION:

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

The full code and instructions can be found in the Power BI Angular README.

If you want a glance at the look and feel of the new component, you can check out our demo application here.

The app demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report, as well as setting events and enabling report authoring.

You can find instructions on how to run the demo in the demo section of the Power BI Angular README.

That’s all for this post. We hope you found it useful.

We’d love to hear more from you! Have any feedback or a great new feature in mind? Please share it with us or vote in our Power BI Embedded Analytics Ideas forum.

Reference Link: https://powerbi.microsoft.com/en-us/blog/announcing-power-bi-angular-component/

DEMO Link: https://powerbi.microsoft.com/en-us/blog/announcing-power-bi-angular-component