Core: Help with overriding translate directive

[jellene4eva]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

How do I override the directive so that I can convert the key to lower case before searching the keys?

<span translate>HeLLo WoRld</span>

should instead be read into ngx-translate in lowercase without going through all instances and changing it to {{'HeLLo WoRld'.toLowerCase() | translate }}

<span translate>hello world</span>

What I've tried, and didn't work

import {TranslateDirective} from '@ngx-translate/core';

export class TranslateLowerDirective extends TranslateDirective {
     updateValue(key: string, node: any, translations: any) {
         key = key.toLowerCase();
         super.updateValue(key, node, translations);
     }
}
@ngModule({
    ...
    imports: [
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader), // I have a custom loader declared
                deps: [Http]
            }
        })
    ],
    providers: [
        {provide: TranslateDirective, useClass: TranslateLowerDirective }
    ],
    ...
})

I've also tried similar class extend on TranslateService, but there were many private variables I couldn't access.

[ocombe]

The directive is not a service, it cannot be provided, it is declared when you load the module.
What you can do is copy what the TranslateModule does and customize it like this instead:

import {TranslateDirective, TranslatePipe, TranslateLoader, TranslateParser, TranslateDefaultParser, MissingTranslationHandler, FakeMissingTranslationHandler, TranslateStore, USE_STORE, TranslateService} from '@ngx-translate/core';

export class TranslateLowerDirective extends TranslateDirective {
     updateValue(key: string, node: any, translations: any) {
         key = key.toLowerCase();
         super.updateValue(key, node, translations);
     }
}
@ngModule({
    ...
    declarations: [
        TranslatePipe,
        TranslateLowerDirective
    ],
    imports: [],
    providers: [
            {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader), // I have a custom loader declared
                deps: [Http]
            },
            {provide: TranslateParser, useClass: TranslateDefaultParser},
            {provide: MissingTranslationHandler, useClass: FakeMissingTranslationHandler},
            TranslateStore,
            {provide: USE_STORE, useValue: false},
            TranslateService
    ],
    ...
})

[laserus]

@ocombe do you know whether this is good approach to rename TranslateDirective and TranslatePipe. I have used to (and I think it is more readable) to have TtDirective and TtPipe so one can do:

<div tt>Hello</div>
or
{{'Hello' | tt}}

instead of long name translate which otherwise (repeated 20 times in template) and occupy a lot of visual space).

Is it worth adding this as feature request, or is it already somewhere implemented?

[ocombe]

it's not something that I'll merge sorry, but I was thinking about adding an alias for i18n (the official angular attribute)