Using a component as a parameter for a ngx-translate key

Question

I'm using ngx-translate in my project. I want to use an Angular Material component (mat-form-field), as part of the translation's value. Example:

Key: NumberChoice

Value: Choose a number: {{choice}}.

Use in the HTML:

 <span>{{ 'NumberChoice' | translate: {choice: this.choiceSelectorComponent} }}</span>

choiceSelectorComponent is the mentioned above mat-form-field.

I tried putting the code for the mat-form-field in a new ng component and defined a getter for it in the matching .ts file.

I also tried to get it as an HTML tag like so:

 get choiceSelectorComponent() { return document.createElement('page-size-selector').outerHTML; }

Which only made the tag be part of the translation:

Choose a number: <page-size-selector></page-size-selector>.

In other words, how can I include UI controls inside a translated value dynamically, using them as parameters to pass to ngx-translate .

Answer 1

According to ngx-translate documentation , you should do the following.

In your HTML template:

<span>{{ 'NumberChoice' | translate:choice} }}</span>

And in your component file you define param:

param = this.choiceSelectorComponent() // Or whatever value you want

This will allow the pipe to determine the value of the parameters correctly.

Hope this helps.