Hey stackoverflow / Angular Community!
I have a little question about data-binding on components.
The [value] on my component can have two different strings/labels as value. Since the app knows more languages I am using the translate-pipe for this.
The code-excerpt is probably very self-explanatory.
<my-component [value]="bool1 ? {{'GLOBAL.YES' | translate }} : {{'GLOBAL.NO' | translate }}"></my-component>
Leads to: Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected
It feels like there is a syntax thing, I am missing out on. Tried a lot of different combinations. When I try value without the brackets I end up having the whole string starting with 'bool1 ? ...' as value (what definetly makes sense).
Maybe someone knows how to fix this?
Thank you all in advance.
You can't do interpolation in property binding. You can use a method that JFPicard showed.
Or, if you really need to do this in template, do this:
<my-component [value]="(bool1 ? 'GLOBAL.YES' : 'GLOBAL.NO') | translate"></my-component>