Announcing Power BI Angular Component

[tnoamraveh]

Today we are thrilled to introduce the newly released Power BI component for Angular. This component lets you easily embed your Power BI reports, dashboards and more into your Angular web application.

Over the past few years, the popularity of Angular has greatly increased, and it is currently one of the most-used web frameworks by professional developers. The new Power BI component for Angular gets you from insights to actions quickly and easily, by providing the needed framework for integrating Power BI analytics in your Angular app.

Using this library, you can embed Power BI reports, dashboards, tiles, visuals, Q&A and paginated reports. You can also optimize your report's performance using the available bootstrap integration or phased embedding, set and edit event handlers, and take advantage of the available client-side APIs.

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.