microsoft / powerbi-client-angular

Power BI Angular component. This library lets you embed Power BI report, dashboard, dashboard tile, report visual, or Q&A in your Angular application.

powerbi-client-angular

Power BI Angular component. This library lets you embed Power BI reports, dashboards, tiles, report visuals, Q&As and paginated reports in your Angular application.

Quick Start

Import

Import the 'PowerBIEmbedModule' inside your target module:

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Embed a Power BI report

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

How to bootstrap a PowerBI report:

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Note: To embed the report after bootstrapping, update the embedConfig (with at least accessToken and embedUrl).

Embedding other Power BI artifacts

The library is offering the following components that can be used to embed various Power BI artifacts.

Component	Selector to use for embedding
PowerBIReportEmbedComponent	<powerbi-report>
PowerBIDashboardEmbedComponent	<powerbi-dashboard>
PowerBITileEmbedComponent	<powerbi-tile>
PowerBIVisualEmbedComponent	<powerbi-visual>
PowerBIQnaEmbedComponent	<powerbi-qna>
PowerBIPaginatedReportEmbedComponent	<powerbi-paginated-report>

You can embed other artifacts such as:

<powerbi-dashboard
    [embedConfig] = "<IDashboardEmbedConfiguration>"
    [cssClassName] = "<className>"
    [eventHandlers] = "<Map of String and eventHandler>"
>
</powerbi-dashboard>

Demo

This demo includes an Angular application that embeds a sample report using the PowerBIReportEmbed component.
It demonstrates the complete flow from bootstrapping the report, to embedding and updating the embedded report.
It also demonstrates using the powerbi report authoring library, by enabling the user to change the type of a report visual from a report using the "Change visual type" button.
It also sets a 'DataSelected' event.

To run the demo on localhost, run the following command:

npm run demo

Redirect to http://localhost:4200/ to view in the browser.

Usage

Use case	Details
Embed Power BI	To embed your powerbi artifact, pass the component with at least type, embedUrl and accessToken in embedConfig property.
Apply style class	Pass the name(s) of style classes to be applied to the embed container div to the cssClassName property.
Set event handlers	Pass a map object of event name (string) and event handler (function) to the eventHandlers prop. Key: Event name Value: Event handler method to be triggered Event handler method takes two optional parameters: First parameter: Event Second parameter: Reference to the embedded entity List of supported events is given here: Additional events
Reset event handlers	To reset event handler for an event, set the event handler's value as null in the eventHandlers map of properties.
Bootstrap Power BI	To bootstrap your powerbi entity, pass the property embedConfig to the component without accessToken Note: embedConfig should at least contain type of the powerbi entity being embedded. Available types: "report", "dashboard", "tile", "visual" and "qna". Refer to How to bootstrap a report section in Quick Start. Note: A paginated report cannot be bootstrapped.
Using with PowerBI Report Authoring	1. Install powerbi-report-authoring as an npm dependency. 2. Use the report authoring APIs using the embedded report's instance.
Phased embedding (Report type only)	Set the phasedEmbedding property value to true Refer to the Phased embedding article.

Note: Supported browsers are Edge, Chrome, and Firefox.

Properties accepted by Components

Property	Description	Supported by
embedConfig	Configuration for embedding the PowerBI entity (required)	All
phasedEmbedding	Phased embedding flag (optional)	Report
eventHandlers	Map of pair of event name and its handler method to be triggered on the event (optional)	Report, Dashboard, Tile, Visual, Qna
cssClassName	CSS class to be set on the embedding container (optional)	All
service	Provide the instance of PowerBI service (optional)	All

Supported Events

Events supported by various Power BI entities:

Entity	Event
Report	"buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered"
Dashboard	"loaded", "tileClicked"
Tile	"tileLoaded", "tileClicked"
QnA	"visualRendered"

Event Handler to be used with Map

type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null;

Using supported SDK methods for Power BI artifacts

Import

Import the 'PowerBIReportEmbedComponent' inside your targeted component file:

import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';

Initialize inside the Component

@ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;

Use

You can use reportObj to call supported SDK APIs.

There are two ways in which reportObj can be used:

• Expose the Report object globally.

  Steps:

  1. Create one class variable, for example, report.
  2. Implement the AfterViewInit hook for the component class.
     
     

   class AppComponent implements AfterViewInit { ... }

  3. Define the ngAfterViewInit method as follows:
     
     

   ngAfterViewInit(): void {
       this.report = this.reportObj.getReport();
   }

  4. this.report points to the Report object from the library and can be used to call SDK methods such as, getVisuals, getBookmarks etc.
     
     

  async getReportPages(): Page[] {
      // this.report is a class variable, initialized in step 3
      const pages = await this.report.getPages();
      console.log(pages);
  }

• Use reportObj inside a class method.

  This approach will not expose the Report object globally, instead reportObj would be available locally in the function.

  Example:

  async getReportPages(): Page[] {
      const report = this.reportObj.getReport();
      const visuals = await report.getPages();
      console.log(visuals);
  }

Note

The library supports Angular applications having version >= 13.

Dependencies

powerbi-client (https://www.npmjs.com/package/powerbi-client)

Peer Dependencies

@angular/common (https://www.npmjs.com/package/@angular/common)

@angular/core (https://www.npmjs.com/package/@angular/core)

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments

Data Collection.

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications.

If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement. Our privacy statement is located at Microsoft Privacy Statement. You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.

Support

Our public support page is available at Microsoft Support Statement.

powerbi-client-angular's Issues

Make it possible to set the active page from outside the powerbi-client

In one of our products we embed a power-bi report in an angular application. However, instead of using the tabs inside the power-bi report, we'd like to have our own menu in the angular app. So in the embeddedConfig, we set navContentPaneEnabled: false and when a menu item is clicked in the angular app we update the embeddedConfig with a different pageName.

But this does not do anything, probably because in function embedOrUpdateReport there is this code:

    if (this.containerRef.nativeElement && this.embedConfig.embedUrl !== prevEmbedConfig.embedUrl) {
      this.embedReport();
    }

However, we don't use an embedUrl, instead we only use id, groupId, accessToken and pageName. It seems there is no way to only set the active page from outside the powerbi-client component.

I can think of two ways:

• Exposing a setActivePage callback function.
• When the embeddedConfig changes and only the pageName is changed, instead of calling the embedReport function, only set the active page.

Or, if there is another way to set the active page, I'd like to know how to do it.

Pass click event outside

Tried to listen for the click even: (click)="callMyMethod" but this is never called, guessing there is a stopPropagation in place somewhere inside.

Using report.on('click'... does not work and gives an error since its not defined in the available events.

Our workaround is to listen for the rendered event but a normal click would be better.

This feature is especially interesting when the app has a inactivity timeout and working inside the report needs to reset the countdown. Also I could think of other scenarios when the app needs to react when something is done inside.

Please consider / give feedback on this matter.
Thank you, Daniel

loaded event fires inconsistently

I have added a loaded event as per the readme. It does not fire except occasionally when resizing the window or loading the window in a mobile view.
Otherwise the loaded event is never fired and I cannot call my code to resize the container on load?

Problems in using <powerbi-report> in Angular application using Popup Window (New Browser Window)

Since we are not able to use powerbi-report component in our Angular Web App which is having routes, due to blocker issue with powerbi-report component. Refer - #19

Hence, I went ahead and explored powerbi-report component using Popup Window approach (New Browser window opened using window.open() API of Browser).

I have extended this GitHub repository to have Popup Window and render powerbi-report component also in Popup Window. Added console logs when CustomEvent is received. That is -

eventHandlersMap = new Map<string, (event?: service.ICustomEvent<any>) => void>([
  ['loaded', () => console.log('Report has loaded')],
  ['rendered', () => { console.log('Report has rendered'); }],
  ['visualClicked', (params) => console.log('visual clicked', params)],
  ['pageChanged', (event) => console.log('page changed', event)],
  [
    'error', (event?: service.ICustomEvent<any>) => {
      if (event) {
        console.error('error event', event.detail);
      }
    }
  ]
]);

Unfortunately, I found one more blocker, that is - Events coming out of powerbi-report component are not reaching the parent component when powerbi-report component is in Popup Window. Events reach parent component only when _powerbi-report> component is in same page.

Pl. refer attached screenshot for the issue -

• The CustomEvent marked in below screenshot (as yellow highlight), as visualClicked, is reaching parent component when powerbi-report component is on same page.
• The same is not happening when powerbi-report component is in Popup Window, here nothing gets logged in Browser console, as Events are not reaching parent component.

Power Bi on-premise

Hi, is it possible use powerbi-client-angular on PowerBi On-Premise?

Support for Scorecards

Hello,

Is there something on the roadmap to support embedding Scorecards?

Thanks

rendered event is not firing after report loaded

I have embedded multiple reports in my angular application, all were working fine. suddenly the rendered event firing stopped and I can't perform the actions which i was performing on the rendered event.

Missing fonts and styles in power bi embedded reports

I'm experiencing a somewhat bizarre issue with missing fonts and styles in power bi embedded. I've managed to embed my report properly, however the appearance of the report is different from what I'm seeing in power bi desktop and online.

As an example, this is one of the visuals from my report in power bi online:

Here's the same visual when it's actually embedded in an angular application:

As you can see, the font in the visual title is switched from Segoe UI to Times New Roman, and the spacing of the visual is changed. The content near the bottom is overflowing the bounds of the visual. This issue happens across many visuals, and which visual's fonts and styles are dropped appears to be quite random.

I should mention we are not using any custom fonts. I suspect that this issue might be stemming from us being in development, and not having a dedicated power bi capacity. It's possible the MS is throttling requests on their end, leading to some js bundles being dropped which could lead to the missing styles and fonts. However, I would like to confirm this as our decision to go ahead and pay for a power bi embedded capacity is contingent on whether the styling of the reports will be as expected.

Any help on this issue would be greatly appreciated! I'm quite stumped since this issue does not seem to be coming up on GitHub issues or MS support pages.

Visual constructor and Visual update console.logs unwanted

Hello,

Related to version 3.0.5

I keep seeing in the console two events fired: Visual constructor and Visual update despite I passed undefined to eventHandlers.

Can I turn off these console logs?

<powerbi-report [eventHandlers]="undefined">

Embeding PowerBI Desktop Report

Hello,

We are trying to embed our PowerBI on-prem report in our Angular application.
We had to add this query string ?rs:embed=true to make it work.
The issue now is that we are unable to hide the filter panel and make the report to take the full width the following settings.

const settings = { panes: { filters: { expanded: false, visible: false, }, }, layoutType: models.LayoutType.Custom, customlayout: { displayOption: models.DisplayOption.FitToWidth, }, };

ViewEngine to Ivy migration suggested by npm

npm start

Processing legacy "View Engine" libraries:
- powerbi-client-angular [es2015/esm2015] (https://github.com/microsoft/powerbi-client-angular.git)
...
Encourage the library authors to publish an Ivy distribution.

Problems in using <powerbi-report> in Angular application having routes with RouteReuseStrategy

Issue in a nutshell - We are trying explore this library but it's blocking us because it uses iframe to house the report.

Details -
Like README.md file mentions, this library/component allows to "embeds" Power BI reports in Angular web application, hence it's using iframe (i.e. to embed). However we are running into problems in consuming it due to usage of iframe.

Just like any standard Angular web application we are using routing in our application.
Refer: https://angular.io/guide/routing-overview

Plus, we have Route Reuse Strategy in place, so that routes are not destroyed when user switches between routes
Refer: https://angular.io/api/router/RouteReuseStrategy

When we use this component in one of our routes, since it’s not a generating “inline content” (but generates iframe), we see below:

• When user switches to different route, “power bi iframe” gets destroyed and
• When user comes back to that route, iframe is recreated again

Iframe gets created and destroyed as many times as user switches between routes, degrading overall user experience as:

• User loses the context due to reloading of report in iframe
• User sees a loading happening again from scratch
• Additionally, it increases network traffic degrading performance

Questions:

1. Do you have any ways to address above problems?
2. Do you have any plans to update this library/component with native Angular implementation?

Clear Selection Programmatically

Can we have a method for the Report to clear the selection on the report?

Case:- Let's suppose we have a bar report rendered in the application and I have clicked on the particular bar. Now just like we have an option for 'Clear Selection' in the more option of the report. We can do it programmatically by introducing a new method for the report.

Only works in Angular versions 12+

Please add some documentation to point this out or fail the install if Angular version 12+ is not present.

Requires at least @angular/core and @angular/common version 12 therefore an Angular upgrade to 12 or higher is needed.
Install will still succeed with a lower Angular version, but build/serve will fail.

Warnings during install

npm WARN [email protected] requires a peer of @angular/common@^12.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^12.0.1 but none is installed. You must install peer dependencies yourself.

Snippet from powerbi-client-angular.js which is included in the npm install of powerbi-client-angular:

import * as i0 from '@angular/core';
...
PowerBIEmbedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PowerBIEmbedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
PowerBIEmbedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: PowerBIEmbedComponent, selector: "powerbi-embed", inputs: { cssClassName: "cssClassName", service: "service" }, ngImport: i0, template: '', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PowerBIEmbedComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'powerbi-embed',
                    template: '',
                }]
        }], propDecorators: { cssClassName: [{
                type: Input
            }], service: [{
                type: Input
            }] } });

You will get a list of errors including:

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 94:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 245:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 422:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 595:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 750:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 919:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1092:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1165:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

mError: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 108:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 282:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 458:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 631:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 785:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 955:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1128:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1182:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

[91mError: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 88:29-50
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 239:35-56
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 416:38-59
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 589:33-54
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 744:44-65
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 913:35-56
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1086:32-53
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1159:26-47
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1175:26-48
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.js 1167:26-48
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

Optimization Npm Builed Failed when adding powerbi-client-angular in our Angular 16 app

Hello,
is there a way to manage bundles and optimization process with the adding off powerbi-client-angular.

Since we add this module our build failed from JS Heap out of size despite increasing the memory associated

How to show two or more PowerBI reports in the same page?

I am trying to show two or more PowerBI reports on the same angular page. Here is my code:

.html:

            <div class="container">
                <div class="controls">
                    <ng-container>
                        <p-button (click)="loadTroubleshootData(2)">Show Report</p-button>
                    </ng-container>
                    <ng-container *ngIf="isEmbedded; else embedReportFlow"></ng-container>
                    
                    <ng-template #embedReportFlow>
                        <label class="display-message position">
                            {{ displayMessage }}
                        </label>
                    </ng-template>

                    <ng-container *ngIf="isEmbedded">
                        <powerbi-report [embedConfig]="reportConfig" 
                                        [cssClassName]="reportClass" 
                                        [phasedEmbedding]="phasedEmbeddingFlag" 
                                        [eventHandlers]="eventHandlersMap">
                        </powerbi-report>
                    </ng-container>

                </div>
            </div>
         <div class="container">
                <div class="controls">
                    <ng-container>
                        <p-button (click)="loadTroubleshootData(3)">Show Report</p-button>
                    </ng-container>
                    <ng-container *ngIf="isEmbeddedAnalytics; else embedReportFlowAnalytics"></ng-container>
                    
                    <ng-template #embedReportFlowAnalytics>
                        <label class="display-message position">
                            {{ displayMessage }}
                        </label>
                    </ng-template>

                    <ng-container *ngIf="isEmbeddedAnalytics">
                        <powerbi-report [embedConfig]="reportConfig" 
                                        [cssClassName]="reportClass" 
                                        [phasedEmbedding]="phasedEmbeddingFlag" 
                                        [eventHandlers]="eventHandlersMap">
                        </powerbi-report>
                    </ng-container>

                </div>
            </div>

As you can see I have two powerbi-report tags and both are wrapped under if condition to check different variables. *ngIf="isEmbedded"

compoent:

loadTroubleshootData(target: number) {

   if (target === 2) {
      
      this.loadUserReportDetails('Report1',target);

    } else if (target === 3) {
      this.loadUserReportDetails('Report2', target);

    }

}

loadUserReportDetails(reportName:string, target:number){


    this.MyService.getReportDetails( reportName ).subscribe({
      next: (resp: any) => {
        // Update the reportConfig to embed the PowerBI report
        this.reportConfig = {
          ...this.reportConfig,
          id: resp.reportId,
          embedUrl: resp.embedUrl,
          accessToken: resp.embedToken,
        };

        console.log(this.reportConfig);
      },
      error: (error: any) => {
        this.displayMessage = `Failed to fetch config for report. Status: ${error.status} ${error.statusText}`;
        console.error(this.displayMessage);
        return;
      },
    });

    if (target === 2){
      this.isEmbedded = true;
    } else if (target === 3) {
      this.isEmbeddedAnalytics = true;
    }
    // Update the display message
    this.displayMessage = '';

}

so when we click on the first button it loads report correctly, however, upon click of second button, it shows error message in console that reads as below and the first report gets replace by second report.

Refused to frame 'https://app.powerbi.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://teams.powerbi.com https://teams.microsoft.com https://gov.teams.microsoft.us https://dod.teams.microsoft.us https://outlook.office.com https://outlook-sdf.office.com https://outlook.office365.com https://outlook-sdf.office365.com https://www.office.com https://scuprodprv.www.office.com https://www.microsoft365.com https://local.loop.microsoft.com https://dev.loop.microsoft.com https://df.loop.microsoft.com https://loop.microsoft.com".

Have anyone tried showing multiple reports on the same page? Thank you.

ERROR Error: Invalid embed URL detected. Either URL hostname or protocol are invalid. Please use Power BI REST APIs to get the valid URL

on second click ee.validateEmbedUrl return true and on first click it return false. this is inconsistent. please fix it

I am using powerbi-report-angular version 3.0.5

cannot install power bi angular in Angular 10.0.3version and node 16v

Hi Team,

My project is running on Angular 10.0.3v and node js 16v, when I am trying to install power Bi client angular facing challenges due to version compatibilities, so I tried to install lower versions of power Bi angular 1.0.1version yet it is not installing. Most of the solutions I got to upgrade Angular >=12v to make it work however I am afraid we will face deprecation issues or any dependency issues if we upgrade.
Tried to approach Microsoft community support and npm support no solution until now. can anyone guide how to approach better solution. Tried to upgrade google tag manager as per the error still same.

npm i -g [email protected]
npm WARN config global --global, --local are deprecated. Use --location=global instead.
npm WARN config global --global, --local are deprecated. Use --location=global instead.

changed 13 packages, and audited 14 packages in 17s

found 0 vulnerabilities
npm i powerbi-client-angular
npm WARN config global --global, --local are deprecated. Use --location=global instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"10.0.14" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"~10.0.4" from the root project
npm ERR! peer @angular/common@"10.0.14" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! peer @angular/platform-browser@"10.0.14" from @angular/[email protected]
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"~10.0.4" from the root project
npm ERR! peer @angular/platform-browser@"10.0.14" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser-dynamic
npm ERR! @angular/platform-browser-dynamic@"~10.0.4" from the root project
npm ERR! 3 more (@angular/router, ngx-image-cropper, the root project)
npm ERR! 5 more (@angular/platform-browser-dynamic, @angular/router, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.3" from [email protected]
npm ERR! node_modules/angular-google-tag-manager
npm ERR! angular-google-tag-manager@"^1.4.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"^12.0.3" from [email protected]
npm ERR! node_modules/angular-google-tag-manager
npm ERR! angular-google-tag-manager@"^1.4.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Ammagari.Sathyanand\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!

TypeError: Cannot read properties of null (reading 'postMessage')

Hello,

This error occurs if we destroy the <powerbi-report /> approximately 1.5s after it was created.

Scenario

A page "A" containing a <powerbi-report /> component, and another another page "B" without the componenet.
(It would probably also happen by toggling the component with ngIf)

Steps

• Open the page "A"
• Wait ~1.5s after the loading logo appeared, and leave page "A" for page "B".

Expected

The component should be properly destroyed.

Actual

TypeError: Cannot read properties of null (reading 'postMessage')

Comment

The ngx-powerbi library seems to have the same issue:
ramandeep-singh-1983/ngx-powerbi#48

Does powerbi-cilent-angular library supports server side rendering?

We have an angular application in which we are using powerbi-cilent-angular library for embedding power bi report. the application is running fine when we locally run it. When we are building SSR (Server side Rendering) package to deploy on the node. Package is getting successfully build but when we deploy it on node it does not work and gives below error.
If we build SSR (Server side Rendering) package after commenting out powerbi-cilent-angular library that package works on the node but then obviously embedding report functionality does not work.
So Does powerbi-cilent-angular library supports server side rendering?

Angular 16 Support

Is there a release planned to support Ivy Compilation, which is required for Angular 16?

Doesn't work with Angular 15

Attempting to use this with Angular 15, since as per the documentation this works with >=13, but keep getting 'powerbi-report' is not a known element, this is true for all Power Bi components.

To state the obvious I have imported the PowerBiEmbedModule in my standalone component and in my importProvidersFrom when routing to ensure all services have been loaded.

Unexpected results with LayoutSwitch

When we use the "LayoutSwitch" function, the landscape view does not always work.

The settings used:

this.reportConfig = {
		...this.reportConfig,
		id: reportConfigResponse.Id,
		embedUrl: reportConfigResponse.EmbedUrl,
		accessToken: reportConfigResponse.EmbedToken.Token,
		settings: {
						panes: {
							filters: {
								expanded: false,
								visible: false,
							},
						},
						layoutType: models.LayoutType.MobilePortrait
					}
    };

Here the code to change the layout (simplify):

  @HostListener('window:orientationchange', ['$event'])
  onOrientationChange(event: any) {
    if (event.target.screen.orientation.angle === 90) {
		console.debug('MobilePortrait');
		this.reportObj.getReport().switchLayout(models.LayoutType.MobilePortrait);
    
    }
    else {
		console.debug('MobileLandscape');
		this.reportObj.getReport().switchLayout(models.LayoutType.MobileLandscape);
    }    
  }

Small details:

• If the initial load has the Landscape layout, then the 'LayoutSwitch' function works
• If the initial load has the Portrait layout, then the 'LayoutSwitch' function does not work
• The bug is not consistent: it only occurs with certain PBI. I am attaching a report to test.
• There is no problem when we use powerbi-client without Angular (tested with powerbi-client v2.22.3)

Do you have any work-around to make it work as it is supposed to? Thanks in advance.
Bug_Landscape_Portrait.zip

FrontLoadException conceptualSchema Exception: Unexpected end of JSON input

Since its not possible to create issues in the powerbi-client repo I'm creating this here.

I'm trying to embed PowerBI in Blazor Server components within an Angular project. See this project, BlazorCustomElements

I'm getting the following exception

Uncaught (in promis) "FrontLoadException" "conceptualSchema Exception: Unexpected end of JSON input"

This is the C# code that is calling the javascript and this is the powerBI embed Javascript in the Angular

I don´t think its related but there is an error when I run the project

Styling the div/iframe

<powerbi-report [embedConfig]="reportConfig"
[phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">

How can I set the height and width of the iFrame that is produced? Also, how can I get the report to align to the left of the iFrame? Currently it shows a 150px height iFrame. I want to also be able to set the border to none. I know you can pass a css class to it but can't find what you can set using that i.e. what is the format of it?

Can someone please explain how the token is delivered?

As per the code we are calling an API: https://aka.ms/CaptureViewsReportEmbedConfig
This API returns token and other details. I don't understand what the API URL is doing? is it just returning some hardcoded data? If I have a PowerBI report then how can I generate these details?

Thank you.

Cant import the named export 'Component'

ERROR in ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.mjs 81:18-27
Can't import the named export 'Component' from non EcmaScript module (only default export is available)
ERROR in ./node_modules/powerbi-client-angular/fesm2015/powerbi-client-angular.mjs 189:18-27
Can't import the named export 'Component' from non EcmaScript module (only default export is available)

  "powerbi-client-angular": "3.0.3",
     "@angular/cdk": "9.2.4",
    "@angular/common": "~9.1.13",
    "@angular/compiler": "~9.1.13",

Event Handlers not working for paginated reports.

Event Handlers not working for paginated reports.

please find the below eventHandlers map

eventHandlersMap = new Map ([
['loaded', () => {
console.log('Report has loaded');
},
],
['rendered', () => console.log('Report has rendered')],
['error', (event?: any) => {
if (event) {
console.error(event.detail);
}
},
],
]) as Map<string, (event?: any, embeddedEntity?: pbi.Embed) => void | null>;

NaN issues while using zoom sliders on the visuals

Hi

I am getting this weird issue while embedding the powerbi report on the angular webapp. After applying filters the visual is not generated correctly and clicking on it will make the visual appear.

This is happening with the powerbi visual containing the zoom slider on the date.

Here is the screen shot for the same

After clicking

Support the latest Angular LTS 11

Business applications are rarely written with the latest versions of frameworks, but rather with the latest LTS (long term support) versions. According to https://angular.io/guide/releases#support-policy-and-schedule Angular 12 is in active development and not LTS but this package only supports Angular 12 which is unacceptable for commercial development. There should be an officially released package that targets Angular 11 which is the latest LTS version.

Refresh Token

According to the docs we have to implement functionality to refresh the token automatically.

Is there / do you / could you have any plans to implement this functionality on this package?

Would be nice if we could subscribe to a method in this package instead of everyone writing their own manual solution.

Warning CommonJS or AMD dependencies

Currently getting a warning when running application

'powerbi-client'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Added configs as instructed above
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
...
"allowedCommonJsDependencies": [ "powerbi-client-angular"],

Have to build library before run the demo

Which not mentioned in the readme

Can't work with a low version of angular

My app is built on Angular 7, and i failed to make it work with this package, even on version 1.0.1

ERROR in : Unexpected value 'PowerBIEmbedModule in /DocumentRoot/node_modules/powerbi-client-angular/powerbi-embed.module.d.ts' imported by the module 'FooModule in /DocumentRoot/src/app/foo/foo.module.ts'. Please add a @NgModule annotation.

Want to send additional parameters with request which we made to get the report

Is there any way to send the additional parameters with request which we made to get the report. In our case we have to send the logged in user email with request.

Thanks in advance.

Unable to embed reports of type 'create'.

Hello,

We are currently porting our application from AngularJS to Angular 12. In our AngularJS application, the users were be able to create Power BI reports directly from the UI. We want to be able to do this as well in the new Angular app.

The config we were using to allow this in our old app is:

var pbiCreateConfig = {
        type: 'create',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken, //We are getting this from our API
        embedUrl: embedUrl, 
        datasetId: embedDatasetId
 };

var reportCreateContainer = angular.element(document.querySelector("#embedPBICreateContainer"))[0];
var reportCreate = powerbi.createReport(reportCreateContainer, pbiCreateConfig);

When trying to do the same thing in our new Angular app, with the below config, there is an error in the console.
Config:
Component.ts file:

this.createConfig = <IEmbedConfigurationBase><any>{
            type: 'create',
            tokenType: models.TokenType.Embed,
            accessToken: tokenData.token, //We are getting this from our API
            embedUrl: 'https://app.powerbi.com/reportEmbed?groupId=' + this.selectedDatasetDetails.WorkspaceID,
            datasetId: this.selectedDatasetDetails.DatasetID,
};

Component.html file:

<powerbi-report #create *ngIf="showCreateReport"
                    [embedConfig]="createConfig"
                    [cssClassName]="createReportClass"
                    [phasedEmbedding]="false"
                    [eventHandlers]="eventHandlers">
</powerbi-report>

The embedUrl and datasetId are the same in both cases.

The error that we facing is:

Uncaught Error: Attempted to embed component of type: create but did not find any matching component.  Please verify the type you specified is intended.
    at Service../src/service.ts.Service.embedNew (powerbi.js:10634:1)
    at Service../src/service.ts.Service.embedInternal (powerbi.js:10601:1)
    at Service../src/service.ts.Service.bootstrap (powerbi.js:10587:1)
    at PowerBIReportEmbedComponent.push../node_modules/powerbi-client-angular/__ivy_ngcc__/bundles/powerbi-client-angular.umd.js.PowerBIReportEmbedComponent.ngAfterViewInit (powerbi-client-angular.umd.js:476:1)
    at callHook (core.umd.js:2817:1)
    at callHooks (core.umd.js:2786:1)
    at executeInitAndCheckHooks (core.umd.js:2737:1)
    at refreshView (core.umd.js:10037:1)
    at refreshEmbeddedViews (core.umd.js:11093:1)
    at refreshView (core.umd.js:9990:1)

Could you please help us out with this issue as soon as possible?

The PoberBI report stays in small iframe

I was able to just display a PowerBI report, however, it seems no matter what I do, it stays in a small Iframe. Here is how it looks:

After we click on the button:

I tried changing the height of report-container class:

.report-container {
    height: 100%;
    margin: 8px auto;
    width: 90%;
    display: block;
}

But that didn't work. The hard part is that the <powerbi-report tag doesn't have any other parameter to adjust the height.

Please suggest. Thank you.

Allow applying css classes without defining them globally

ag-grid-angular allows this it is very nice, as it allows reuse of the component in multiple areas of your application with differing requirements.

Version 3.0.0 to NPM?

Is version 3.0.0 going to be published to NPM? It is specified in package.json, and causes the demo app to fail unless you change it to 2.0.1. I was able to get the demo app to work, however I cannot get version 2.0.1 to work with my existing project. I think 3.0.0 may work with my project.

Refresh Token issue on token expiry

Hi,

I am using powerbi-client-angular to embed one of the report in angular 14 component. The access token we are providing to embedConfig had expiry time set to 1 hour. I added one method which is responsible to compare the expiration time to get the new token 10 mins before of expiry. I trying to set that token but not able to do so. I used following two ways but both not working.

1. The first way is. Get the new token, create new instance of IReportEmbedConfiguration interface, update the access token and embed url and assign back to the embedConfig input parameters. e.g.:

      const reportConfigNew: IReportEmbedConfiguration = {
           ...this.embedConfig,
           accessToken: response?.data?.accessToken,
          embedUrl: response?.data?.embedUrl[0]?.embedUrl
       }
   
       this.embedConfig= reportConfigNew;
   

In this way the problem is - Embed url remains same and there is one check in PowerBIReportEmbedComponent like it will only proceed further if there is a change in embed url. I tried by adding the one extra query param to embed url as well but it keeps loading then and open the **Something went wrong ** popup.

2. In second way, I accessed the PowerBIReportEmbedComponent component like:

      @ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
   

   After that I used following code to update the token:

    const report = this.reportObj.getReport();
    report.setAccessToken(response?.data?.accessToken);
   

The problem here is: It neither gives any error nor updates the token. I checked by getting the token again using following method and it is still accessing the old token (which is about to expire in some mins). So not able to get the solution in this way as well.

 const existingToken = report.config.accessToken;

Can someone help me here to fix the issue.
Thanks in advance.

Table scroll bars are not visible in Google Chrome

In the embedded report, scroll bars for the Table are now visible in Google Chrome.
In Firefox, scroll bars are visible.

---

Example:

Report in Power BI Workspace

Report in Power BI Embedded

---

However, I have found that if I apply the following configuration to the report, it magically fixes the problem:

settings: {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pagesLayout: {
              '': { visualsLayout: { '': { } } }
        }
    }
 }

---

System information.
Angular version - 11
powerbi-client-angular version - 2.0.0
Google Chrome version - 111.0.5563.111 (Official Build) (64-bit)

PowerBI report not visible in Angular 12

1. After going to readMe file, I changed below config details and run the project

2. Clicked Embed button

3. Received message - Access token is successfully set. Loading Power BI report.
   but report not loaded after this.

4. It kept saying - Almost done and just a loading sign

5. I have not changed constant file URL , Its kept same ( / Endpoint to get report config
   const reportUrl = 'https://aka.ms/CaptureViewsReportEmbedConfig';)
   6 net work call shows below error
   https://wabi-west-us-b-primary-redirect.analysis.windows.net/powerbi/refresh/subscribe
   Request Method: POST
   Status Code: 403

6. app.component. ts file updated with only below settings values

[embedConfig] = {{
type: "report",
id: "",
embedUrl: "",
accessToken: "",
tokenType: models.TokenType.Embed,
settings: {
panes: {
filters: {
expanded: false,
visible: false
}
},
background: models.BackgroundType.Transparent,
}
}}

Let me know If I missed any.

Thank you
Monika

Add list of events supported by eventHandler in the Docs/Readme

Hey Guys, could you add the list of events supported by eventHandler in the Docs/ Readme.
In the project I'm working in, we used the powerbi-report component and we needed a clicklistener on it, I tried it the angular way and couldn't get it to work (was stuck on this for a long time) and after some digging I came across the "visualClicked" event in the demo application here and using that it works. So it would be helpful if you guys can just add a list of all the events supported by eventHandler somewhere in the docs or readme.

Thanks

reportObj always returns `undefined`

I have tried the demo code

Tried to use reportObj by two ways

1. Expose the Report object globally - didn't worked
2. Use reportObj inside a class method - didn't worked

Even I tried to setTimeout of say 20 seconds. still reportObj is undefined.

I am sure I am missing something from the documentation.

please help

How to print and fullscreen

Is there a way to fullscreen and print the report?

Support for reseting a report

Hello.

According to https://learn.microsoft.com/en-us/javascript/api/overview/powerbi/mobile#limitations we should call powerbi.reset(HTMLElement) on report container.

How can something simmilar be achieved with angular powerbi-report component?

Thanks.

<powerbi-report> component and <iframe> rendering with fixed height instead of full screen

Hello, I have been trying to render a Power BI report into an Angular project, but unable to make the report render in full screen.

With some settings and config modifications, I could make it take up full width, but the height seems to be always fixed to ~150px.

On making the width "FitToWidth" (refer to the below config code in ts file), the iframe/div isn't getting maximized to max height, even if there is enough parent div space is available. Instead a scroll bar is popping up, which remains unaffected with forced scrollbar and overflow css.

Please suggest a solution or implement features to:

• allow similar settings for "FitFullScreen" or "FitToHeight" along with the existing "FitToWidth"
  (to make the report iFrame render to fullscreen and take up full available space in the parent-div)
• provide options to inject custom css or style to <powerbi-report>
• provide documentation for reportClass in [cssClassName]="reportClass" for existing supported classes
• allow more options for reportClass in [cssClassName]="reportClass"
• allow more custom settings in [embedConfig]="reportConfig" to support all types of scenarios and use cases
  (as mentioned in point no 1)

In typescript file, the reportConfig: IReportEmbedConfiguration for making the report take up full width:

settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: false,
    layoutType: models.LayoutType.Custom,
    customLayout: {
        displayOption: models.DisplayOption.FitToWidth
    }
}

In html, code to render powerbi-report:

<div class="row">
    <div class="col-md-12">
        <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">
        </powerbi-report>
    </div>
</div>

Please refer to the attached screenshot for the issue:

Set Up

Hello, I have been trying to get this working in an Angular project, and haven't had a lot of success.

I can't figure out what I should change the 'https://aka.ms/CaptureViewsReportEmbedConfig' endpoint to, so that I can pull down my own access token and report.

I had been working on trying to get the React UserOwnsData converted over to work with Angular, but I can't get from receiving the id_token to embedding the report.

it looks like the id token passed back is not what the React demo uses in the embed call, and I couldn't figure out where it is getting the correct access token from.

Dominic

Property 'changeType' does not exist on type 'VisualDescriptor'.

powerbi-client-angular/Angular/demo/src/app/app.component.ts

Line 150 in 01064fb

const response = await visual.changeType('lineChart');

Gov Cloud Reports are not rendering in Angular Component due to CROS issue

We have reports in app.powerbigov.us (Gov cloud) and embed url also having https://app.powerbigov.us/reportEmbed?reportId=....
However, angular failed to load report due to cros issue.

Here is Network traffic results:

What I have observed is call in going to below URL failed. But why we have Referer: https://app.powerbi.com/ for the below URL instead of https://app.powerbi.com/ Due to this I suspect CROS issue. Why this is happening?

Request URL: https://wabi-us-gov-iowa-redirect.analysis.usgovcloudapi.net/explore/reports/1a1f947a-e0de-4cf8-a645-27f22730f6d4/conceptualschema?userPreferredLocale=en-US

Appreciate your feedback.