Integrating PowerBI with Angular: A Comprehensive Guide

Aug 07, 2024

Introduction to PowerBI and Angular Integration

PowerBI is a cloud-based business analytics service by Microsoft that enables users to create interactive reports, dashboards, and visualizations from multiple data sources. Conversely, Angular is a robust front-end framework for building dynamic single-page applications using the Model-View-Controller architecture.

Prerequisites

Before diving into the integration, ensure you have the following:

An Angular application: Set up and running.
A PowerBI account: With a dataset and report ready for embedding.

Setting Up the Integration

To integrate PowerBI with Angular, you’ll need to use PowerBI’s embedded JavaScript API, which allows you to programmatically manage and interact with PowerBI visualizations within an Angular app.

Step 1: Create a New Angular Application

Start by creating a new Angular application using the Angular CLI:

ng new my-powerbi-app

Navigate to your project directory:

cd my-powerbi-app

Step 2: Install the PowerBI Client Library

Install the powerbi-client package to interact with PowerBI:

npm install powerbi-client

Embedding a PowerBI Report

To embed a PowerBI report, you need:

PowerBI Report Credentials: Including client ID, client secret, and report ID.
Azure Access Token: For retrieving the embed URL.

If you are working within an organization, you should have licensed access to PowerBI. For external integrations, you need permission to call PowerBI’s REST APIs to retrieve the embed URL and other details.

Step 3: Configure PowerBI in Angular

Import the powerbi-client library into your Angular component:

import * as pbi from 'powerbi-client';

Create a function to embed the PowerBI report in your component:

embedPowerBIReport() {
  const embedConfig: pbi.IEmbedConfiguration = {
    type: 'report',
    id: 'your-report-id',
    embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=your-report-id',
    tokenType: pbi.models.TokenType.Embed,
    accessToken: 'your-access-token',
    permissions: pbi.models.Permissions.All,
    settings: {
      filterPaneEnabled: true,
      navContentPaneEnabled: true,
    },
  };
  const reportContainer = document.getElementById('report-container');
  const report = pbi.embed(reportContainer, embedConfig);
}

In your Angular component’s HTML template, add an element with the id where the report will be embedded:

<div id="report-container"></div>

Dynamically Embedding PowerBI Reports

To embed reports dynamically, you’ll need to make API calls to PowerBI’s REST API to retrieve the embed URL. For this, you must have an Azure Active Directory Access Token.

Step 4: Obtain the Access Token

Make an API call to the following endpoint to get the access token:

https://login.microsoftonline.com/{{tenantId}}/oauth2/token

Replace {{tenantId}} with your PowerBI app's tenant ID, which you can find in the PowerBI app settings.

Step 5: Retrieve Report Embed URL

Use the access token to make a GET request to retrieve the report details:

GET https://api.powerbi.com/v1.0/myorg/reports/{reportId}

You will receive a response containing the embed URL, web URL, dataset ID, and other details.

Example Response:

{
  "datasetId": "cfafbeb1-8037-4d0c-896e-a46fb27ff229",
  "id": "5b218778-e7a5-4d73-8187-f10824047715",
  "name": "SalesMarketing",
  "webUrl": "https://app.powerbi.com//reports/5b218778-e7a5-4d73-8187-f10824047715",
  "embedUrl": "https://app.powerbi.com/reportEmbed?reportId=5b218778-e7a5-4d73-8187-f10824047715"
}

Step 6: Update Angular Component

Add the details obtained from the API call to the embedPowerBIReport function in your Angular component’s ngOnInit method:

ngOnInit() { this.embedPowerBIReport(); }

Testing Your Integration

Run your Angular application to test the integration:

ng serve

Open your application in a browser at

http://localhost:4200/

, and you should see the PowerBI report embedded in the specified div element.

Conclusion

Integrating PowerBI with Angular combines both platforms to deliver a powerful visualization tool within an Angular application. Users can interact with visualizations, apply filters, and explore data seamlessly within the Angular environment.

Thank you for reading! If you found this guide helpful, feel free to subscribe for more updates and support my work.

Muhammad Hamid