SAP Spartacus - How to show the custom components in Spartacus UI

Question

I have a custom component to display the images as tile in my UI.

I am getting the response as follows for the created custom component from the backend.

components: "Test1Component Test2Component Test3Component Test4Component Test5Component Test6Component Test7Component Test8Component" container: "false" modifiedtime: "2020-09-29T20:52:40.454+05:30" name: "Tiles Component" typeCode: "TileCollectionComponent" uid: "TilesCollectionComponent" uuid: "eyJpdGVtSWQiOiJUaWxlc0NvbGxlY3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJhbHNheWVyLXNwYUNvbnRlbnRDYXRhbG9nIiwiY2F0YWxvZ1ZlcnNpb24iOiJPbmxpbmUifQ=="

How can I retrieve the data and show it in the UI.

Answer 1

The component data indicates that this component is a so-called container component. Container components do only response the component UIDs. This is a bit unfortunate, as you'd need to interact with the cms service in Spartacus to resolve the component types. before you can start rendering them.

We do have an example in our code base that you can use to render these nested components. You see in https://github.com/SAP/spartacus/blob/532603fbcfcf7c21c3abbf4e342fcda03652b61e/projects/storefrontlib/src/cms-components/content/banner-carousel/banner-carousel.component.ts#L25 that we're taken the component data and switchMap this to an array of CmsComponentData. (using cmsService.getComponentData). Spartacus will merge the different parallel requests in the loop automatically to a single backend for the component data.

You can use the CmsComponentData array in an ngFor loop, and leverage the cxComponentWrapper to iterate over all the CmsComponentData objects. The cxComponentWrapper will map to the right component and adds other stuff like smartedit integration.

<ng-container [cxComponentWrapper]="component"></ng-container>

Although this is all available, your question make me think to build a more easy solution that does the heavy lifting.