0

I've created an angular 5 components with @Input parameters. This component is a search panel with logics and html who are provided. The developer can display the search panel where he want and can dynamically inject the search method and the object type displayed.

As the type of data can be dynamically set, I wanted to give the possibility to specify the output string (selected values) but I cannot make it work. The idea would be to be able to give as input parameter:

<my-search-panel value="test" [searchMethod]="searchTest($event) outputExpression="value: {{test}}"/>

where the outputExpression parameter would be set into a div in the template:

<div>{{outputExpression}}</div>

But of course once the html is rendered I get the interpolation as text:

<div>value: {{test}}</div>

Does anyone know if there's a way to dynamically bind Angular interpolation into templates?

Thanks a lot and cheers, Frédéric

Frédéric Nell
  • 131
  • 1
  • 1
  • 14
  • 1
    Angular processes such bindings and interpolations at build time not at runtime. If you really think you need this at runtime you can use the dynamic platform https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular to compile components at runtime. – Günter Zöchbauer Feb 27 '18 at 09:01
  • Ok thanks a lot for the answer I didn't knew if there was a better way to achieve this. – Frédéric Nell Feb 28 '18 at 09:40
  • It's probably better to use your own string replacement instead of dynamic compilation, but it depends on your use case. Dynamic compilation comes at quite some cost. – Günter Zöchbauer Feb 28 '18 at 09:47

0 Answers0