Search code examples
angulardata-bindingconditional-statementsangular-translate

Conditional data binding in Angular with piped (translate) variables

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.

Solution

  • 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>