Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
Marco57
Helper III
Helper III

Avoid report re embedding on route change in Angular

Hello,

 

I have an angular component containing my html container on which the embedding is going to happen. Now on route change, this component is getting destroyed and so does its html container containing the report. When user is getting back to the report route, the component is initializing again and re embedding from scratch the report, removing any changes made from the user to the report.

 

I would like to know if there are means to make the report survive it component destruction. I thought about means like making the embedding process happening in a service being called from the component displaying the report. Issue is I do not see how to set that practically and what exactly should the service return : the html container or the result of pbi.embed() method?

 

This is currently the method called from my service onInit of my report viewer component:

 

 

this.powerbiService
      .getReportEmbedInfoById()
      .subscribe(async (data) => {
        if (this.pbiContainerElement) {
          const embedConfig = this.powerbiService.buildEmbedConfig(data);
          powerbi.reset(this.pbiContainerElement);
          this.myReport = powerbi.embed(this.pbiContainerElement, embedConfig);
          // report.off removes all event handlers for a specific event
          this.myReport.off('loaded');
          // report.on will add an event handler
          this.myReport.on('loaded', () => {
            this.powerbiService.handleTokenExpiration(this.myReport);
            loadedResolve();
            // this.myReport.off("loaded");
          });
      });

 

 Thanks for any support.

4 REPLIES 4
sdk1990
Microsoft Employee
Microsoft Employee

Hi @Marco57 

 

We have the same issue. Can you please share how you were able to resolve it and if the recommendation provided by v-shex-msft worked? Thanks!

 

 

Anonymous
Not applicable

HI @Marco57,

According to your description, it sounds like you want to avoid the user changes on your report?
If that is the case, I'd like to suggest you not sharing the 'edit' permission to this report, then changes on this content will be reset when the report reload.

Regards,
Xiaoxin Sheng

Hi @Anonymous,

 

I actually want to keep the changes from user to the report as long as they did not ask explicitlly to refresh the report, thus re embedding it and getting the original version of it. I am currently embedding it as view mode only.

 

Some temporary changes are being made from the user but when he navigates to another root of the web application embedding the report, then the embedded report is destroyed and embedded again from scratch when user gets back to the report root of the web application.

 

What I want is to find a way to not re start the full embedding process when Angular changes its route to a differente one from within the web application. If the user explicitly refreshed the web application, then it is ok that it embeds a report from scratch, but not on route change.

 

Thanks

Rgds

Marc. 

Anonymous
Not applicable

Hi @Marco57,

So you mean to keep current changes avoid refresh when you change data source?
If that is the case, you can enable the persistent filter or try to create a global variable to save current filters and restore them to the new report contents after the report refreshed:

Enable persistent filters in a Power BI embedded analytics application | Microsoft Docs

Create, edit, and save an embedded report | Microsoft Docs

Regards,
Xiaoxin Sheng

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.