Angular translate variable replacement

Question

I would like to use a variable in my translation but I don't know how to do it in my template.

In my HTML template :

 <md-input-container class="md-block">
                <md-autocomplete md-no-cache="vm.noCache" 
                                    md-search-text="user.searchUser" 
                                    md-items="userItem in vm.querySearch(user.searchUser)" 
                                    md-item-text="userItem.display"
                                    md-selected-item-change="vm.selectedItemChange(userItem, user)"
                                    md-min-length="0"
                                    required>
                    <md-item-template>
                        <span md-highlight-text="user.searchUser" md-highlight-flags="^i">{{userItem.display}}</span>
                    </md-item-template>
                    <md-not-found>
                        {{ 'user.autocomplete.no_user' | translate:'{ username: user.searchUser }' }}

                    </md-not-found>
                </md-autocomplete>
            </md-input-container>

and my translation file (json) :

"user": {
            "autocomplete": {
        "no_user" : "No user has been found ({{username}})",
     }
}

How can I use user.searchUser to show that message ?

Thank very much !

This : "No user has been found ()" username variable seems to be ignored — Joe Allen, May 09 '17 at 15:43

score 35 · Accepted Answer · answered May 09 '17 at 16:11

35

Here the answer to do it directly in the HTML template :

{{ 'user.autocomplete.no_user' | translate:{ username: user.searchUser } }}

answered May 09 '17 at 16:11

Joe Allen

1,267
4
24
41

3

Note that it is important the blank between the end of translation parameters and the interpolation bindings. Removing it (`{{ 'user.autocomplete.no_user' | translate:{ username: user.searchUser }}}`) will throw a 'Unexpected end of expression' error – hmartos Apr 23 '20 at 09:17

score 2 · Answer 2 · answered May 09 '17 at 15:53

2

You can create an object containing all your translation parameters and use it for the translation like this :

{{ 'user.autocomplete.no_user' | translate:translationParameters }}

Look at this plunker how I did it, for more details it's explain at the end of the section Variable replacement in translate filter of Angular Translate doc

answered May 09 '17 at 15:53

JeanJacques

1,754
1
12
25

Thank you very much for your answer but I finally found how to do it directly in the template. I just had to remove the quotes : {{ 'user.autocomplete.no_user' | translate:{ username: user.searchUser } }} – Joe Allen May 09 '17 at 16:09
@JoeAllen Ok, but I think it's almost the same solution, I just declare the object containing the translation parameters in the scope and you directly in the directive call. If your problem is solved if you could accept your answer or mine to close the question, it would be great ! :) – JeanJacques May 10 '17 at 08:38

score 2 · Answer 3 · answered Jan 26 '21 at 13:53

2

This is how you can do it in Angular 5+

translation file:

{
  "HELLO": "Hello {user}"
}

Template:

{ 'HELLO' | translate: { user: "World" } }

Displays: Hello World

answered Jan 26 '21 at 13:53

Sebastian Viereck

5,455
53
53

Hoàng Huỳnh Nhật · Answer 4 · 2019-08-02T04:42:34.263

1

{{ELEMENT_TRANSLATE|translate}}

{{ 'ELEMENT_TRANSLATE'|translate:'{value: 111 }'}}

{{ 'ELEMENT_TRANSLATE'|translate:{value: user.searchUser} }}

The last one is the best one.

edited Aug 02 '19 at 04:42

answered Aug 01 '19 at 02:40

Hoàng Huỳnh Nhật

146
1
4

Angular translate variable replacement

4 Answers4