Description
We've created the NgxReplaceElementsPipe & WithRouterLinkPipe pipes to facilitate using Angular components through custom elements (web components) in strings provided to innerHTML or outerHTML directives or interpolation in the template.
This seemed to be a good plan and works well in most cases. However, when using this combined with other pipes like the TranslatePIpe, this causes issues with rendering. The root cause for these issues is that the value of the previous pipe is not changing which is preventing our pure pipes, to not render again, loosing the web-component that is provided with our pipes.
We can leverage this by adding an additional argument to indicate a loading state or that elements of the template have changed or by making the pipes unpure, but these are just workarounds.
By moving this functionality to a directive, we hope te leverage this issue in a structural way, instead of using workarounds.
An example of old vs. new implementation:
<div>{{ stringWithCustomElement | translate | withRouterLinks: [...] }}</div>will change to
<div [withRouterLinks]="stringWithCustomElement | translate"></div>