Angular library which contains components to embed PowerBi visuals.

Downloads in past


1.0.08 years ago8 years agoMinified + gzip package size for angular-powerbi in KB


Angular module which wraps PowerBI-JavaScript as service and adds a collection of components for each embedded type (Currently only Report is supported) which you can use to easily embed Power BI visuals within your Angular applications.


angular-powerbi.js includes the following:
  • Service: PowerBiService
(Handles messaging communication between host frame/window and embedded powerbi visual iframes/windows)
  • Web Components
1. Report Specific Component
<powerbi-report embed-url="" access-token=""></powerbi-report>
2. Generic Component
<powerbi-component component=""></powerbi-component>

Getting started

  1. Install:
npm install -save angular-powerbi
  1. Include the angular-powerbi.js file within your app:
<script src="angular-powerbi.js"></script>
  1. Include the 'powerbi' module as a dependency of your app:
app.module('app', [
  1. Fetch data to embed a visual from the server (embedUrl and accessToken) and make it available on controller scope.
This would likely require using a factory or service to fetch report data from your local server.	
Example where the report is resolved when entering route:
`return ReportsService.findById('5dac7a4a-4452-46b3-99f6-a25915e0fe55');`
findById(id: string): ng.IPromise<PowerBi.IReport> {
return this.$http.get(`${this.baseUrl}/api/reports/${id}`)
.then(response =>;
If you need a sample server to test you can use the following:
- Live example:
- C# Sample Server: (COMING SOON)
- Nodejs Sample Server: (COMING SOON)
  1. Insert the component in your template where you want to embed the visual:
<powerbi-report embed-url="" access-token="" options="vm.reportOptions"></powerbi-report>