How to Embed Power BI Report in Angular 8

Integrating rich, interactive data visualizations directly into your web applications can transform the user experience, and embedding a Power BI report is a fantastic way to do this. This guide will walk you through the entire process of embedding a Power BI report into an Angular 8 application, step by step. We'll cover everything from a bit of initial setup in Azure to writing the final lines of code in your components.

Graphed

Still Building Reports Manually?

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

Watch the Demo

What You'll Need First

Before getting started, make sure you have the following prerequisites in place. This will make the entire process much smoother.

• Power BI Pro Account: A Pro license is required to embed reports in a production application.
• An Existing Power BI Report: You’ll need a published report in a workspace (not "My Workspace") that you're ready to embed.
• An App Workspace in Power BI: Embedding works with reports in App Workspaces, so ensure your report is published to one.
• Node.js and Angular CLI: Your development environment should be set up with a recent version of Node.js and the Angular CLI installed.
• An Angular 8 Project: You can create a new one using the command ng new your-app-name if you're starting from scratch.
• Admin Permissions: You'll need admin permissions for your Azure Active Directory (Azure AD) and Power BI account to register the application.

Step 1: Register Your Application in Azure AD

To securely access your Power BI reports via an API, you first need to register your application within Azure AD. This process gives your app an identity and allows you to specify permissions for it to access Power BI content.

Registering the App

You can complete this process easily using the Power BI App Registration Tool.

1. Navigate to the Power BI App Registration page.
2. Select your embed solution. For this tutorial, we will use the "Embed for your customers" solution. Microsoft recommends that every ISV separate customers' data by providing each customer with a single workspace.
3. Log in with your administrator account when prompted.
4. Fill out the registration form:
5. Click Register and save the authentication details that would be required in your client as well as your backend code. This includes:

This tool also automatically grants the required permissions in the background. In a few clicks, you are all ready!

Keep your Client ID, the report ID, and Workspace ID handy because you'll need a secure backend endpoint for your application to communicate with using these secrets for fetching the data for Power BI embedding.

Step 2: Install Power BI Client Libraries in Angular

Next, you need to add the official Microsoft Power BI client libraries to your Angular project. These packages provide the components and services needed to handle the embedding process.

Open your terminal, navigate to your Angular project's root directory, and run the following command:

npm install --save powerbi-client powerbi-client-angular

This command installs two important packages:

• powerbi-client: The core JavaScript SDK for Power BI embedding.
• powerbi-client-angular: An Angular wrapper that provides a component to make embedding even easier.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Step 3: Configure Your Angular Module

After installing the libraries, you need to import the PowerBIEmbedModule into your application so your components can use it.

Open your app.module.ts file and add the import statement for PowerBIEmbedModule and include it in the imports array of your @NgModule decorator.

import { BrowserModule } from '@angular/platform-browser',
import { NgModule } from '@angular/core',

// Import the Power BI wrapper module
import { PowerBIEmbedModule } from 'powerbi-client-angular',

import { AppComponent } from './app.component',

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Add the module to your imports
    PowerBIEmbedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

With this simple addition, the <powerbi-embed> component is now available anywhere within your application.

Step 4: Create a Component to Host the Report

It's good practice to create a dedicated component to manage your embedded report. This keeps your code organized and reusable.

Generate a new component using the Angular CLI:

ng generate component powerbi-report

Graphed

Still Building Reports Manually?

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

Watch the Demo

Configuring the TypeScript File

Now, open the newly created powerbi-report.component.ts. This is where we'll define the configuration for our report.

Your component will need several key pieces of information:

• embedUrl: The URL specific to your report.
• reportId: The unique ID of the report you want to embed.
• accessToken: A temporary token that grants access to the report.

Here's how you can structure your component class:

import { Component, OnInit } from '@angular/core',
import { IReportEmbedConfiguration, models, service } from 'powerbi-client',

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

  // Configuration for the report
  embedConfig: IReportEmbedConfiguration = {
    type: 'report',
    id: undefined, // Will be set after fetching from your service
    embedUrl: undefined, // Will be set after fetching from your service
    accessToken: undefined, // Will be set after fetching from your service
    tokenType: models.TokenType.Embed,
    settings: {
      panes: {
        filters: {
          expanded: false,
          visible: true
        }
      },
      navContentPaneEnabled: true
    }
  },

  // Maps which are used to bind the report's properties when embedding.
  reportClass = 'report-container',
  phasedEmbedding = false,

  // Power BI service instance
  powerbi: service.Service,

  constructor(/* Your services here */) { 
    this.powerbi = new service.Service(
      service.factories.hpmFactory,
      service.factories.wpmpFactory,
      service.factories.routerFactory
    ),
  }

  ngOnInit(): void {
    // This is where you would call a backend service to get the embed details
    this.getEmbedDetails(),
  }

  // A mock function to get embedding details. 
  // IMPORTANT: In a real-world app, this would be an HTTP call to your secure backend.
  getEmbedDetails(): void {
    // TODO: Replace these with actual values from a secure backend API call
    const mockReportId = 'your-report-id-here',
    const mockEmbedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed...',
    const mockAccessToken = 'your-access-token-from-backend',
  
    console.log('Fetching embed details...'),
  
    this.embedConfig = {
      ...this.embedConfig,
      id: mockReportId,
      embedUrl: mockEmbedUrl,
      accessToken: mockAccessToken,
    },
  
    console.log('Embed Config Updated:', this.embedConfig),
  }
  
  // You would need an event handler map for the report events. For now, it could be an empty map
  eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
    ['loaded', () => console.log('Report loaded!')],
    ['error', (event) => console.error(event.detail)],
  ]) as Map<string, (event?: service.ICustomEvent<any>) => void>,
}

A Quick Note on Security:

The most crucial part here is the accessToken. Generating this token involves using your Application secret, which should never be exposed on the client side. The correct approach is to create a secure API endpoint on your backend that handles AD authentication as well as communicating with the Power BI Service API to retrieve the accessToken and return it to your Angular application. For this example, we’re using mock data so you can see the component's required structure.

Graphed

Still Building Reports Manually?

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

Watch the Demo

Designing the HTML Template

Next, open powerbi-report.component.html. This file is much simpler. All we need to do is use the <powerbi-embed> component provided by the library and bind our configuration to it.

<div class="container">
  <h2>Power BI Embedded Report</h2>
  <powerbi-embed
    [embedConfig]="embedConfig"
    [eventHandlers]="eventHandlersMap"
    [cssClassName]="reportClass"
    [phasedEmbedding]="phasedEmbedding"
  >
  </powerbi-embed>
</div>

Let's also add a bit of styling in powerbi-report.component.css to ensure our report has dimensions.

:host {
  display: block,
  width: 100%,
}
.report-container {
  height: 70vh, /* Adjust for your needs */
  width: 100%,
  border: 1px solid #ddd,
}
h2 {
  text-align: center,
  margin-bottom: 20px,
}

Step 5: Add Your Component to the Main View

Finally, we need to display our newly created report component. Open your app.component.html and add the component's selector.

<!-- Main Application Layout -->
<app-powerbi-report></app-powerbi-report>

Now, if you run your application (ng serve), you should see the placeholder for your report running. Once you implement the backend service to provide a real ID, URL, and access token and update the getEmbedDetails function, your fully-interactive Power BI report will render directly inside your Angular app!

Troubleshooting Common Problems

Sometimes things don't work on the first try. Here are a few common issues and how to fix them:

• 401 Unauthorized Error: This almost always means there is an issue with your accessToken. It might be expired, invalid, or for the wrong resource. Double-check your token generation logic on the backend.
• 403 Forbidden Error: This suggests you have a valid token, but the user/application doesn’t have permission to view the report. Make sure the Azure AD app has the right Power BI API permissions and that the report is shared correctly within your Power BI workspace.
• Blank Screen or Endless Spinner: This can be caused by a JavaScript error or an incorrect embedUrl or reportId. Open your browser's developer console (F12) to check for errors. Also, validate that your embedConfig object contains all the necessary properties before the <powerbi-embed> component tries to render.
• CORS Errors: If your backend API isn't configured correctly, you might get Cross-Origin Resource Sharing (CORS) errors. Ensure your server allows requests from http://localhost:4200 (or your Angular app's origin) by setting the appropriate headers.

Final Thoughts

In this post, we've walked through configuring your Azure application, setting up your Angular project, and using the powerbi-client-angular library to embed a Power BI report right into your app. While it requires a few steps, the result is a powerful, interactive analytics experience for your users without them ever having to leave your platform.

We know that setting up embedding pipelines with traditional BI tools can be complex. That's why we built Graphed to simplify the entire reporting process for marketing and sales teams. Instead of wrestling with tokens and embed configurations, you connect your data sources directly to Graphed, describe the dashboards you need in plain English, and get real-time, shareable reports instantly. It cuts out the technical overhead, so you can get back to focusing on the insights themselves.