Hello I m new to integrating GoodData with Angular and I m u GoodData #gd-beginners

Hello, I'm new to integrating GoodData with Angula...

Shahenshah Malik

09/12/2024, 3:19 AM

Hello, I'm new to integrating GoodData with Angular, and I’m using GoodData web components in my application. I need to dynamically display a

gd-dashboard

based on the workspace ID received from an API response. The workspace ID is required in the GoodData script, which I would typically add to the

<head></head>

section of the HTML. However, Angular treats dynamically adding scripts as a security issue and prevents this from being done. Is there a way to load the GoodData script dynamically in Angular without violating Angular's security restrictions? Or, is there another approach to loading the GoodData web component in this scenario? Any help would be greatly appreciated. Thank you!

👍 1

Jakub Vajda

09/13/2024, 9:57 AM

Hi @Shahenshah Malik, I believe the solution here is about making the URL as trusted with

DomSanitizer

library. There is a thread on StackOverflow, that nicely describes how to mark that URL as safe: • bypassSecurityTrustResourceUrl should be generally avoided as it may expose application to security risks • sanitize is then the function that will create a safe and trusted value, you should be able to dynamically import. I hope it helps.

Shahenshah Malik

09/13/2024, 11:17 AM

Thanks so much, let me try that

Shahenshah Malik

09/14/2024, 6:48 AM

The stackoverflow solution worked and I'm able to load the dashboard, I have another problem though below is the code I'm trying in Angular, I'm able to see the dashboard id on screen but still get this error in console

Copy code

@if(dashboardId) {
    {{dashboardId}}
    <gd-dashboard class="dashboard" dashboard="{{dashboardId}}" #dashboard></gd-dashboard>
}
@else {
    <div class="error">No dashboard ID provided</div>
}

Shahenshah Malik

09/14/2024, 6:49 AM

I tried both, property binding as well as interpolation, nothing seems to work

Shahenshah Malik

09/14/2024, 6:49 AM

but when I provide hard coded id it loads

Shahenshah Malik

09/14/2024, 7:23 AM

I resolved it by injecting the gd-dashboard element dynamically

Copy code

const gdElement = document.createElement('gd-dashboard');
			gdElement.classList.add('dashboard');
			gdElement.setAttribute('dashboard', this.dashboardId);
			
			document.getElementById('dashboardContainer').appendChild(gdElement);

🙌 1

9 Views

Open in Slack

Previous Next