How to Integrate Power BI Report in Angular

Embedding a Power BI report directly into your Angular application brings your data to life exactly where your users need it. Instead of sending them to a separate platform, you can present interactive dashboards and reports within your app's familiar interface. This guide will walk you through the entire process, step-by-step, from setting up authentication in Azure to rendering the report in your Angular component.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Before You Begin: What You'll Need

To follow along, make sure you have a few things ready. This initial setup is the foundation for a smooth integration.

• A Power BI Pro or Premium Account: Embedding content requires a Power BI Pro or Premium Per User (PPU) license. Free accounts can be used for development with a pro trial or an embed token, but a Pro license is necessary for most real-world scenarios.
• A Published Power BI Report: You’ll need an existing report published to a workspace in your Power BI service. For this tutorial, we will use a report that you have created and have access to.
• An Existing Angular Application: You should have a basic Angular project up and running. If you don't, you can create one quickly using the Angular CLI with ng new my-powerbi-app.
• Access to Azure Active Directory (AAD): Embedding requires you to register your application in AAD to handle authentication and authorization securely.

Understanding Power BI Embedding Models

Before writing any code, it’s important to understand the two primary models for embedding Power BI content. Your choice depends on who your users are.

• User-Owns-Data (Embed for your organization): In this model, each user of your Angular application must have their own Power BI Pro license. They authenticate using their own credentials. This is perfect for internal applications where employees already have Power BI accounts. We will focus on this model for this tutorial as it's a common starting point for integrating Power BI into internal business tools.
• App-Owns-Data (Embed for your customers): In this model, your application authenticates with Power BI using a master user account or a service principal. Your end-users don’t need a Power BI license to view the reports. This is ideal for independent software vendors (ISVs) or for embedding reports into a commercial application for external clients. While the authentication flow is different, the embedding principles remain very similar.

Step 1: Register Your Application in Azure AD

First, you need to let Azure AD know about your Angular application so it can manage authentication. This step provides your app with a unique identity (Client ID) that Power BI will use to grant access.

1. Navigate to the Azure Portal and sign in.
2. Go to Azure Active Directory > App registrations.
3. Click New registration.
4. Give your application a name, like "Angular Power BI App".
5. For "Supported account types," choose the option that best fits your user base. "Accounts in this organizational directory only" is a common choice for internal tools.
6. Under "Redirect URI (optional)," select Single-page application (SPA) and enter the URL where your Angular app runs during development. This is typically http://localhost:4200.
7. Click Register.

Once registered, take note of the Application (client) ID and Directory (tenant) ID from the overview page. You'll need these in your Angular app.

Configure API Permissions

Now, you need to give your newly registered app permission to access the Power BI API on behalf of the signed-in user.

1. From your app registration page, go to API permissions.
2. Click Add a permission.
3. Select Power BI Service from the list of Microsoft APIs.
4. Choose Delegated permissions. This means your app will access the API as the signed-in user.
5. Check the necessary permissions. A good starting point is Report.Read.All which allows the app to view all reports the user has access to.
6. Click Add permissions.

Finally, click the Grant admin consent for [Your Tenant Name] button to pre-approve the permissions for all users in your organization. This prevents each user from seeing a consent pop-up the first time they log in.

Step 2: Prepare Your Angular Application

With Azure set up, it's time to install the necessary libraries into your Angular project. These packages will handle the authentication flow and the report embedding itself.

Open your terminal in the root of your Angular project and run the following commands:

npm install powerbi-client-angular npm install @azure/msal-browser @azure/msal-angular

• powerbi-client-angular: The official Angular component library from Microsoft for embedding Power BI content.
• @azure/msal-browser & @azure/msal-angular: Microsoft Authentication Library (MSAL) for handling authentication against the Microsoft identity platform.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Store Your Configuration

It's best practice to store your Azure AD configuration in your environment files. Open src/environments/environment.ts and add your app's details:

export const environment = { production: false, msalConfig: { auth: { clientId: 'YOUR_APPLICATION_CLIENT_ID', authority: 'https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID', redirectUri: 'http://localhost:4200' } }, powerBiApi: { apiUrl: 'https://api.powerbi.com/', scope: 'https://analysis.windows.net/powerbi/api/Report.Read.All' } },

Remember to replace the clientId and authority placeholders with the values you copied from your Azure app registration.

Step 3: Implement Authentication with MSAL

Now, we'll configure MSAL in the main app module to manage user logins and acquire access tokens. Open your app.module.ts file and set it up like this:

import { NgModule } from '@angular/core', import { BrowserModule } from '@angular/platform-browser', import { AppRoutingModule } from './app-routing.module', import { AppComponent } from './app.component',

import { MsalModule, MsalRedirectComponent } from '@azure/msal-angular', import { PublicClientApplication } from '@azure/msal-browser',

import { PowerBIEmbedModule } from 'powerbi-client-angular', import { environment } from 'src/environments/environment',

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, PowerBIEmbedModule, MsalModule.forRoot(new PublicClientApplication( environment.msalConfig ), null, null) ], providers: [], bootstrap: [AppComponent, MsalRedirectComponent] // Add MsalRedirectComponent }) export class AppModule { }

Notice we added MsalRedirectComponent to the bootstrap array. This is required by MSAL to handle the redirects that happen after a user logs in.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Step 4: Embed the Report in a Component

This is where everything comes together. Let’s create a component that will handle logging the user in, getting the access token, and rendering the Power BI report.

First, grab the essential details from your Power BI report. Open your report in the Power BI service. The URL will look something like this:

app.powerbi.com/groups/[WORKSPACE_ID]/reports/[REPORT_ID]/ReportSection

You need to copy the Workspace ID and the Report ID.

Now, let's update your primary component, app.component.ts, to handle the logic:

import { Component, OnInit } from '@angular/core', import { MsalService } from '@azure/msal-angular', import { AuthenticationResult } from '@azure/msal-browser', import { IEmbedConfiguration } from 'powerbi-client', import { environment } from 'src/environments/environment',

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit {

isLoggedIn = false,

// Power BI report configuration reportConfig: IEmbedConfiguration = { type: 'report', embedUrl: undefined, // Will be set after login tokenType: 1, // 1 for AAD, 0 for Embed accessToken: undefined, // Will be set after login settings: undefined, },

constructor(private msalService: MsalService) {}

ngOnInit() { this.checkAccount(), }

checkAccount() { this.isLoggedIn = this.msalService.instance.getAllAccounts().length > 0, }

login() { this.msalService.loginPopup().subscribe((response: AuthenticationResult) => { this.msalService.instance.setActiveAccount(response.account), this.checkAccount(), this.embedReport(), }), }

logout() { this.msalService.logout(), }

embedReport() { // Report and Workspace IDs from your Power BI report URL const reportId = 'YOUR_REPORT_ID_HERE', const workspaceId = 'YOUR_WORKSPACE_ID_HERE',

const embedUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${workspaceId}`,

const request = {
   scopes: [environment.powerBiApi.scope],
},

// Acquire token silently for the Power BI API
this.msalService.acquireTokenSilent(request).subscribe(response => {
    this.reportConfig = {
        ...this.reportConfig,
        embedUrl: embedUrl,
        accessToken: response.accessToken,
    },
}, error => {
    console.error('Failed to acquire token:', error),
}),

}

// Event handlers for the Power BI component reportEmbedded(event: any) { console.log('Report embedded!', event), } }

Finally, update your app.component.html to display the login button and the Power BI component:

<div style="padding: 20px,"> <h1>Angular Power BI Demo</h1>

<button (click)="login()" *ngIf="!isLoggedIn"> Login to View Report </button> <button (click)="logout()" *ngIf="isLoggedIn"> Logout </button>

<div *ngIf="isLoggedIn && reportConfig.accessToken" style="margin-top:20px, height: 70vh,"> <powerbi-embed [embedConfig]="reportConfig" cssClassName="report-style-class" (embedded)="reportEmbedded($event)"> </powerbi-embed> </div> </div>

And that’s it! Run your Angular app with ng serve. You should see a login button. Clicking it will trigger the MSAL popup, and once authenticated, the component will fetch an access token and render your Power BI report directly on the page.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Going Further: Interacting With Your Report

Simply displaying a report is only the beginning. The real power comes from the two-way communication between your Angular app and the embedded Power BI content.

• Filtering Data: You can create custom UI elements in your Angular app - like dropdowns or buttons - that apply filters to the Power BI report programmatically. This lets you build a highly customized and integrated user experience.
• Handling Events: The powerbi-client library emits events that you can listen to. For example, you can capture tile-clicked or data-selected events to trigger actions within your Angular application, creating a responsive feedback loop.
• Dynamic Embedding: Instead of hardcoding report IDs, you can use the Power BI REST API to dynamically fetch a list of reports a user has access to and let them choose which one to view.

Final Thoughts

Integrating a Power BI report into your Angular app is a powerful way to deliver data insights without breaking your user's workflow. By registering an app in Azure AD, using MSAL for authentication, and leveraging the powerbi-client-angular library, you can create a seamless and secure analytics experience right inside your application.

While this is a great solution for dev teams embedding reports into custom applications, sometimes building and maintaining this kind of integration isn't what you need. Often, marketing and sales teams just want their data in one place, fast, without the technical overhead. We’ve found that many teams spend hours pulling reports from their various platforms just to get them into one simple dashboard. With Graphed, we remove all that friction by letting you connect your sources and create live dashboards using natural language. Just ask "show me my ad spend vs. revenue for the last month," and we’ll build it for you in seconds.