CODEWITHSUNDEEP
htmlangular-materialngx-translate
ntrch
ntrch

Reputation: 96

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

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.

Upvotes: 2

Views: 732

Answers (1)

Josef Ginerman
Josef Ginerman

Reputation: 1560

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.

Upvotes: 1

Related Questions