Angular: How to Clean-Up When Navigating Away from Embedded Dashboard

[adamcbuckley]

Hi there,

I'm using Angular 17 and I embed a QuickSight dashboard on one of the pages in my app - everything is working fine. 😊

When I navigate away from the page, the QuickSight DASHBOARD iframe is removed because the parent element is removed by Angular (I believe).

However, I note that the QuickSight CONTROL iframe remains.

When I navigate back to the dashboard page, the dashboard is recreated and I note that I now have 2x QuickSight CONTROL iframes. I also see console messages such as: Message with unrecognized event target received

My question is: How can I destroy or otherwise clean up the QuickSight embedding stuff when I navigate away from my dashboard page? I plan to show other dashboards throughout the app.

This is my Angular component code FYI:

async ngOnInit() {
  this.activatedRoute.data.subscribe(async ({ embedUrl }) => {
    if (embedUrl["url"]) {

      // Embed the new dashboard
      const embeddingContext = await createEmbeddingContext({
        onChange: (changeEvent) => {
          console.log("embeddingContext received a change", { changeEvent });
        },
      });

      const dashboardExperience = await embeddingContext.embedDashboard(
        {
          url: embedUrl["url"],
          container: "#dashboardContainer",
          resizeHeightOnSizeChangedEvent: true,
          withIframePlaceholder: true,
          className: "quicksight-dashboard",
        },
        {
          toolbarOptions: {
            export: true,
            undoRedo: true,
            reset: true,
            bookmarks: true,
          },
          onMessage: async (messageEvent: EmbeddingEvents, metadata?: ExperienceFrameMetadata) => {
            console.log({ messageEvent, metadata });
          },
        },
      );

      console.log({ dashboardExperience });
    } else {
      this.reportStatus = "UNAVAILABLE";
    }
  });
}

[sakibhos-amazon]

Hello, you should ensure that when you are navigating to different pages it is not recreating the embeddingContext each time. The app should call createEmbeddingContext once and make sure it is not being called multiple times as you navigate away.

const embeddingContext = await createEmbeddingContext(); // ONLY EVER CALL THIS ONCE
const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);