Xtranslate with OnPush

xtranslate.pipe.ts

import { ChangeDetectorRef, Inject, InjectionToken, OnDestroy, Optional, Pipe, PipeTransform } from '@angular/core';
import { Subscription } from 'rxjs';
import { XTranslateService } from './xtranslate.service';

export const TRANSLATE_PREFIX = new InjectionToken<string>('TRANSLATE_PREFIX');

/**
 * Allows to avoid define full path to translate constatnt every time.
 * @example
 * ```
 * // same standard as translate
 * <div>'PATH.AS.IS' | xtranslate</div>
 * // path via pipe arg, usefull for dynamic args
 * <div>{{name | xtransalte: 'PATH.TO.NAME' }}
 * // deafult component prefix, usefull when in component many translations with the same root path
 * // in component declaration
 *     providers: [
 *       { provide: TRANSLATE_PREFIX, useValue : 'CORE.FOOTER' }
 *   ]
 * <div>{{'LANGUAGE' | xtransalte}}</div> // will be transformed to 'CORE.FOOTER.LANGUAGE'
 * // ignore TRANSLATE_PREFIX for particular translation
 * <div>{{activeLanguage | xtransalte:'/LANG'}}</div> // will be transformed to 'LANGUAGE'
 * ```
 */
@Pipe({
    name: 'xtranslate',
    pure: false
})
export class XTranslatePipe implements PipeTransform, OnDestroy {
    private readonly langChangeSub: Subscription;

    constructor(
        private readonly cdr: ChangeDetectorRef,
        private readonly translateService: XTranslateService,
        @Inject(TRANSLATE_PREFIX)
        @Optional()
        private readonly translatePrefix: string | undefined
    ) {
        this.langChangeSub = this.translateService.translateService.onLangChange.subscribe(() =>
            this.cdr.markForCheck()
        );
    }

    transform(key: string, arg: string) {
        return this.translateService.transalte(key, arg, this.translatePrefix);
    }

    ngOnDestroy() {
        this.langChangeSub.unsubscribe();
    }
}

xtranslate.service.ts

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

const concat = (...args: (string | undefined)[]) => args.filter(f => !!f).join('.');

@Injectable()
export class XTranslateService {
    constructor(public readonly translateService: TranslateService) {}

    transalte(key: string, arg?: string, translatePrefix?: string) {
        if (!key) {
            return key;
        }
        let resetPrefix = false;
        if (key.startsWith('/')) {
            key = key.substring(1);
            resetPrefix = true;
        }
        if (arg && arg.startsWith('/')) {
            arg = arg.substr(1);
            resetPrefix = true;
        }
        const fullKey = concat(!resetPrefix ? translatePrefix : undefined, arg, key);
        return this.translateService.instant(fullKey);
    }

    // utility
    translateDict<T>(items: (T & { label: string })[]): T[] {
        return items.map(x => ({ ...(x as any), label: this.transalte(x.label) }));
    }
}