Extend Spartacus cms component in a library

Question

I'm trying to create an Angular library extending the functionality of the product-images component in product details page of Spartacus.

When customizing a cms component I understood that it would be necessary to add some lines like the following to the app.component.html:

<ng-template cxOutletRef="ProductImagesComponent">
  <cx-product-images></cx-product-images>
</ng-template>

Is it possible to integrate this part in a library so the user that installs it does not need to change their app.component.html? I cannot seem to find any information about it. Also, is it okay to do a library extending the cms component? I'm quite new to Angular and Spartacus.

Thanks

Neil Hubert-Price Neil Hubert-Price · Accepted Answer · 2020-06-18T11:41:35

Using outlets as per your example is one possible way of customising the component, however I don't think you would normally do exactly what you have suggested. Outlets are a way of amending the template rendered for that component, but the default rendering would be to dynamically include the product images component in that template ... so your example changes nothing compared to the default. Typically you would use outlets for relatively small changes, or to put additional content before/after the actual component content. Outlets will not work in all use cases, because the full context may not be available

The other approach is to create a new component in Angular and map that new component to the CMS component coming from the backend. See https://sap.github.io/spartacus-docs/customizing-cms-components/ for the documentation on this.

I have not tried it myself, but it seems reasonable to create libraries that contain your own Angular replacement components & that would just follow the standard Angular approach for creating libraries. I guess the thing to consider is how the developer using the library would then make use of the components from your library. You could have documentation that guides them to configure the component mapping explicitly for their own project, or you could provide config methods that they can just call from their App component to automatically update the configuration. The standard components for Spartacus follow this model already, see https://sap.github.io/spartacus/modules/CmsModule.html#source

Extend Spartacus cms component in a library

1 Answers