{"id":18681,"library":"powerbi-client-angular","title":"PowerBI Client Angular","description":"Angular wrapper library for embedding Power BI reports, dashboards, tiles, visuals, Q&A, paginated reports, and creating reports directly in Angular applications. Current stable version is 6.0.3, released under MIT license. Maintained by Microsoft, with active development and regular releases aligned with Angular versions. Key differentiators: provides Angular-native components (e.g., powerbi-report, powerbi-dashboard) with property binding and event handling, supports phased embedding for performance optimization, and integrates with powerbi-client and powerbi-report-authoring libraries. Requires Angular 17+ and RxJS.","status":"active","version":"6.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/microsoft/powerbi-client-angular","tags":["javascript","microsoft","powerbi","embedded","angular","analytics","report","authoring","typescript"],"install":[{"cmd":"npm install powerbi-client-angular","lang":"bash","label":"npm"},{"cmd":"yarn add powerbi-client-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add powerbi-client-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for Power BI embedding functionality","package":"powerbi-client","optional":false},{"reason":"Optional dependency for report authoring features (changing visual types, etc.)","package":"powerbi-report-authoring","optional":true},{"reason":"Peer dependency for Angular reactive programming","package":"rxjs","optional":false}],"imports":[{"note":"Must be imported in the Angular module (NgModule) where embedding components are used.","symbol":"PowerBIEmbedModule","correct":"import { PowerBIEmbedModule } from 'powerbi-client-angular';"},{"note":"Component is re-exported from the module; direct import from subpath is not supported.","wrong":"import { PowerBIReportEmbedComponent } from 'powerbi-client-angular/powerbi-report-embed.component';","symbol":"PowerBIReportEmbedComponent","correct":"import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';"},{"note":"PowerBIEmbed is a named export (decorator), not a default export. Used for custom components with @PowerBIEmbed().","wrong":"import PowerBIEmbed from 'powerbi-client-angular';","symbol":"PowerBIEmbed","correct":"import { PowerBIEmbed } from 'powerbi-client-angular';"},{"note":"models is re-exported from powerbi-client for convenience, but importing directly from powerbi-client also works.","wrong":"import { models } from 'powerbi-client';","symbol":"models","correct":"import { models } from 'powerbi-client-angular';"}],"quickstart":{"code":"// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { PowerBIEmbedModule } from 'powerbi-client-angular';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    PowerBIEmbedModule\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n// app.component.ts\nimport { Component } from '@angular/core';\nimport { models } from 'powerbi-client-angular';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <powerbi-report\n      [embedConfig]=\"{\n        type: 'report',\n        id: 'reportId',\n        embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=reportId',\n        accessToken: accessToken,\n        tokenType: models.TokenType.Embed\n      }\"\n      [cssClassName]=\"'report-class'\"\n      [eventHandlers]=\"eventHandlers\"\n    ></powerbi-report>\n  `\n})\nexport class AppComponent {\n  accessToken = 'YOUR_ACCESS_TOKEN';\n  eventHandlers = new Map<string, (event?: any) => void>([\n    ['loaded', () => console.log('Report loaded')],\n    ['rendered', () => console.log('Report rendered')],\n    ['error', (event) => console.log(event.detail)]\n  ]);\n}\n","lang":"typescript","description":"Imports PowerBIEmbedModule, defines a component with powerbi-report selector, configures embed properties and event handlers."},"warnings":[{"fix":"Update Angular to 17+ and powerbi-client to 2.23.1+.","message":"Upgraded to Angular 17 and powerbi-client 2.23.1 as of v5.0.0. Older Angular versions are not supported.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Update paginated report configuration to match new interface as per documentation.","message":"In v4.0.0, the paginated report component interface was updated. Existing code using paginated reports may break.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Watch for future releases that may support standalone components.","message":"PowerBIEmbedModule is still used, but Angular standalone components are becoming the norm. The library may transition away from NgModules in future versions.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Use immutable objects for embedConfig or implement ChangeDetectionStrategy.OnPush.","message":"The component re-embeds on every configuration change. Ensure embedConfig is immutable or use OnPush change detection to avoid unnecessary re-embeds.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install powerbi-client-angular powerbi-client' and ensure import path is 'powerbi-client-angular'.","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'powerbi-client-angular'"},{"fix":"Import models from 'powerbi-client-angular' and ensure embedConfig includes a valid accessToken.","cause":"models not imported correctly or accessToken missing.","error":"TypeError: Cannot read properties of undefined (reading 'Embed')"},{"fix":"Add PowerBIEmbedModule to the imports array of the NgModule.","cause":"PowerBIEmbedModule not imported in the module that declares the component.","error":"NG8001: 'powerbi-report' is not a known element"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}