Hey, our frontend is built on the Angular framework (Angular 12) and we're running into issues implementing the GoodData.UI inside an angular Application, the steps I followed are very basic and only go into using the ReactDOM to render the insights. Whoever, I am missing the boilerplate needed to setup all the necessary connections and have yet to find anything related to an this inside an Angular 12 project.

Hello @Stijn Habekotté! Our React components should work in Angular just fine. Were you following our Development Tips on Angular 9+? Here's an article that talks about GoodData.UI in a non-React environment. First, I would create a new project from scratch using @gooddata/create-gooddata-react-app, and I would try to render a random insight to make sure everything works as expected and to learn the basics of GoodData.UI. Then I would follow the instructions on how to bring React into an Angular environment. Where exactly did you get stuck?

Hey @Jiri Zajic, thank you for your speedy response. We have been able to get angular 12 to render react components. The core of our question has more to do with the boilerplate/basic framework needed to get the frontend to talk with the GoodData endpoint. It's probably as simple as creating a service with the right 'magic sauce'. Could you point me into the right direction? The advantages of using a React component described in the post you sent me are the reason we are mainly considering that route.

@Stijn Habekotté I can share some code with you that can help. We ran into similar issues, and were able to work most of the them out

I see @Stijn Habekotté, sure thing. Let me share with you this semi-official example that I build: https://github.com/gooddata/ui-sdk-examples/tree/master/gd-ui-boilerplate It is still React, but it is the most minimalistic scenario needed to render GoodData.UI components. In Angular, you will want to: 1. Replace <BackendProvider /> with passing

backend

directly as a prop to each individual component, e.g.

<ColumnChart backend={backend} />

. 2. Replace <WorkspaceProvider /> with passing

workspace

directly as a prop to each individual component, e.g.

<ColumnChart workspace="asdf123" />

3. Instantiate the

backend

correctly, one example is at https://github.com/gooddata/ui-sdk-examples/blob/master/gd-ui-boilerplate/src/backend.js, but you might need tigerFactory if working with GoodData.CN (bearFactory is for the hosted platform), and also a different authentication provider — get inspired from your working @gooddata/create-gooddata-react-app! Hope this helps!

Thank you! I will most likely look at this in the coarse of today.