Namespace Support

[ReschAndr]

#1284

First of all this PR does not contain breaking changes.
The only issue could be, that the @biesbjerg/ngx-translate-extract tool doesn't support extracting the keys from the namespace translate service, pipe, and directive yet, but I will also provide a PR on their repo to add support for that.

First of all this PR does not contain breaking changes.
The only issue could be, that the @biesbjerg/ngx-translate-extract tool doesn't support extracting the keys from the namespace translate service, pipe, and directive yet, but I will also provide a PR on their repo to add support for that.

Motivation

We are currently working on migrating an existing web application (asp.net forms) to angular. Until now we used our own low-key namespace-translate pipe, which came with the issue of not being able to use the ngx-translate-extract tool. With this pr, I want to add the functionality of not having to define the absolute path of the translation key within very deep nested components. This will prevent spelling mistakes within the key and should help code more orderly.

Added Components

NamespaceTranslateService

The service should be provided on the component level with the namespaceTranslateServiceProvider helper.

It provides functions to get the translation for a specific key(s) which will be prefixed with the namespace given to the namespaceTranslateServiceProvider function.

NamespaceTranslatePipe

The NamespaceTranslatePipe provides the same functionality as the TranslatePipe but prefixes all keys with the namespace given to the namespaceTranslateServiceProvider.

NamespaceTranslateDirective

The NamespaceTranslateDirectiveprovides the same functionality as the TranslateDirective but prefixes all keys with the namespace given to the namespaceTranslateServiceProvider.

Comparison

Without Namespace Translate

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'my-deep-nested-component',
    template: `
        <div>{{ 'PATH.TO.MY.DEEP.NESTED.COMPONENT.HELLO' | translate:param }}</div>
        <div translate [translateParams]="{value: 'world'}" >PATH.TO.MY.DEEP.NESTED.COMPONENT.HELLO</div>
    `
})
export class MyDeepNestedComponent {
    param = {value: 'world'};

    constructor(translate: TranslateService) {
      const instant = translate.instant("PATH.TO.MY.DEEP.NESTED.COMPONENT.HELLO", param);
      
      const observable = translate.get("PATH.TO.MY.DEEP.NESTED.COMPONENT.HELLO", param);
    }
}

With Namespace Translate

import {Component} from '@angular/core';
import {NamespaceTranslateService, namespaceTranslateServiceProvider} from '@ngx-translate/core';

@Component({
    selector: 'my-deep-nested-component',
    template: `
        <div>{{ 'HELLO' | namespaceTranslate:param }}</div>
        <div namespace-translate [translateParams]="{value: 'world'}" >Hello</div>
    `,
    providers: [
        { provide: TRANSLATION_NAMESPACE, useValue: "PATH.TO.MY.DEEP.NESTED.COMPONENT"},
        NamespaceTranslateService
    ]
})
export class MyDeepNestedComponent {
    param = {value: 'world'};

    constructor(namespaceTranslate: NamespaceTranslateService) {
      const instant = namespaceTranslate.instant("HELLO", param);
      
      const observable = namespaceTranslate.get("HELLO", param);
    }
}