Add functionality for extending/overwriting non-cms components

[timoblume]

The Problem
Whenever you want to overwrite a component that is static (not a cms component) you cannot do that easily. You need find the next cms component around the static component, so that you can overwrite that one, in order to make the change. This might add a lot of code for possibly a tiny change (e.g. a custom css class or label). The approach also only works in that one specific place (in the cms component) and not across the entire application.

Spartacus provides a couple of outlets but these do not seem to work reliably in most cases, so that our developers have stopped trying to use them. Sometimes outlets render content multiple times, or not at all (#17711). We know the developers have put thought into the outlet functionality and tried to find places in the application where they think customers might need customization. In the real world however these places are hardly ever sufficient.

Angular does not seem to provide an easy solution for this problem. Otherwise I think this would already have been solved.

What I would like to see
Possible solution:

• A config based solution like the one we have for cms components to provide you own implementation for a given static component.

Alternatively:

• A directive that can be added to your own component that the replaces the referenced cx component
• make more use of content projection in spartacus components that can be addressed by ngProjectAs