Interpolation of the value as the property Component

Question

I have a question about how is the interpolation in the Angular2 done. For example, I have the component X, that have value as @Input(); And in the parent component i have such code:

<X [value]="{{'hello' | translate}} {{ 'world' | translate }}"></X>

But as I can judge such code is wrong. I use ng2-translate for internationalization. Can you provide me withe the links of information, whick can help me?

Answer 1

If you defined an @Input() some in the child component, you have 4 options:

1. Do not pass anything - the input will be undefined

<child-component ... - expression will be parsed as undefined and this.some will be equal to undefined

2. Use neither interpolation nor binding syntax -

<child-component some="value" ... - expression will be parsed a string and this.some will be equal to value string;

3. Use interpolation - <child-component some="{{value}}"...>
4. Use binding syntax - <child-component [some]="value"...>

Both 3-rd and 4-th option will produce exactly the same updateBindings function in the component factory. The expression will be evaluated in the context of the parent component and the input this.some will be equal whatever the value property of the parent component holds.

Read more in the Template Syntax manual.

It seems that in your case the interpolation will do just fine:

<X value="{{'hello' | translate}} {{ 'world' | translate }}"></X>