I'm recently working for a fix where i need the pipes in angular to be added dynamically so I use innerHTML property binding - But the problem is that the only when looping the data I will know which kind of pipe should be added
Pipes in InnerHTML
<span [innerHTML]="element | pipe1 | pipe2"></span>
The above example is working as expected but in case if if try to bind the pipe dynamically like below it is not working
bindPipe = "| pipe1 | pipe2";
<span [innerHTML]="element + bindPipe"></span>
I have added the pipe types as a string property in my component.ts and I have mapped it in the HTML but originally the pipe types will be looped dynamically inside a array of values
In the above case the pipe type is consider as a string concatenation and renders in the UI - Is there any option of binding pipe type like above - I might be wrong but I tried all the solution like adding a directive and binding it but nothing works
I think, I'm missing something little - Please help
Edit
If I try like code below - no odds
bindPipe = "<span>test | pipe1 | pipe2</span>"
<span [innerHTML]="bindPipe"></span>
