title: Can we add pipe in [innerHTML] property binding dynamically
body: <p>I'm recently working for a fix where i need the <code>pipes</code> in angular to be added dynamically so I use <code>innerHTML</code> property binding - But the problem is that the only when looping the data I will know which kind of pipe should be added</p>
  
  <p><strong>Pipes in InnerHTML</strong></p>
  
  <pre><code>&lt;span [innerHTML]="element | pipe1 | pipe2"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The above example is working as expected but in case if if try to bind the pipe dynamically like below it is not working</p>
  
  <pre><code>bindPipe = "| pipe1 | pipe2";
  
  &lt;span [innerHTML]="element + bindPipe"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I have added the pipe types as a string property in my <code>component.ts</code> and I have mapped it in the HTML but originally the pipe types will be looped dynamically inside a array of values</p>
  
  <p>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 </p>
  
  <p>I think, I'm missing something little - Please help</p>
  
  <p><strong>Edit</strong></p>
  
  <p>If I try like code below - no odds </p>
  
  <pre><code>bindPipe = "&lt;span&gt;test | pipe1 | pipe2&lt;/span&gt;"
  
  &lt;span [innerHTML]="bindPipe"&gt;&lt;/span&gt;
  </code></pre>