Angular ngx-translate nested translate in en.json?

Issue

I would like to translate a statement inside of an html template. The translated statement itself contains a translate pipe. This does not seem to be working is there an alternative approach?

in the HTML:

<div class="description">
        {{ state + "-page.intro-info-description" | translate }}

        <ul class="bullet">
        <li>{{ state + "-page.intro-info-1" | translate }}</li>
        <li>{{ state + "-page.intro-info-2" | translate }}</li>
        <li>{{ state + "-page.intro-info-3" | translate }}</li>
        </ul>

    {{ "intro-info-description" | translate }}

    </div>

en.json:

{
 "intro-info-description": "You can register with 
 {{ 'provider' | translate }} if you can provide the following 
 information:",

"provider:": "Provider"
}

I would like the page to say : "You can register with Provider if you can provide the following information:"

Instead it says:

"You can register with {{ 'provider' | translate }} if you can provide the following information:"

Solution

You can use translateParam for this.

the Html looks like this:

{{ state + "-page.intro-info-description" | translate: { provider: (state + "-page.provider" | translate) } }}

or as a element

<p [translate]="state + '-page.intro-info-description'" [translateParams]="{ provider: (state + "-page.provider" | translate)}"></p>

your json files will look this:

{
 "intro-info-description": "You can register with 
 {{provider}} if you can provide the following 
 information:",

"provider:": "Provider"
}

Answered By - Tapi