@viberlab/translate-pipe v7.0.1

vbrTranslate

Extended version of ngx-translate/core TranslatePipe

Features:

• Short Keys - allows not to specify full path to translation string when provided with VBR_TRANSLATE_PREFIX in component providers.
• Observable as pipe parameter.

Short Keys

Pipe concat VBR_TRANSLATE_PREFIX with translation key string and use it as final translation string. Translation key should start with "." to benefit from such functionality, otherwise it will be handled as regular key.

Example:

Instead of:

<h1>{{'content.screen.title' | translate}}</h1>
<p>{{'content.screen.line' | translate}}</p>

In your component add to providers:

  providers: [
    {provide: VBR_TRANSLATE_PREFIX, useValue: 'content.screen'},
  ]

Now in component template short keys could be used:

<h1>{{'.title' | vbrTranslate}}</h1>
<p class="first">{{'.line' | vbrTranslate}}</p>

Observable as pipe parameter

Use Observable as pipe parameter.

Example:

// translation file
...
{
  'greetings': 'Hi {name}, welcome home!'
}
...

// component
public userName = of({name: 'Peter'});

In your template

BEFORE

<h1>{{'greetings' | translate:(userName | async)}}</h1>

AFTER

<h1>{{'greetings' | vbrTranslate:userName}}</h1>