I want to extend ngx-translate's pipe to make it potentially multi purpose within my app.
My pipe:
import { Pipe, PipeTransform } from '@angular/core';
import { TranslatePipe } from "@ngx-translate/core";
@Pipe({
name: 'msg'
})
export class MsgPipe extends TranslatePipe implements PipeTransform {
transform(value: any, args: any[]): any {
return super.transform(value, args)
}
}
In order to wait for the relevant translate modules to load, I have used Angular's APP_INITIALIZER:
app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { appRoutes } from './app.routes';
import { AppComponent } from './root/app.component';
import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
import { HomePageComponent } from './shared/components/home-page/home-page.component';
import { MsgPipe } from './shared/pipes/msg.pipe';
import { ChangeDetectorRef } from '@angular/core';
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { Injector, APP_INITIALIZER } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { LOCATION_INITIALIZED } from '@angular/common';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
export function appInitializerFactory(translate: TranslateService, injector: Injector) {
return () => new Promise<any>((resolve: any) => {
const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
locationInitialized.then(() => {
const langToSet = 'en'
translate.setDefaultLang('en');
translate.use(langToSet).subscribe(() => {
console.info(`Successfully initialized '${langToSet}' language.'`);
}, err => {
console.error(`Problem with '${langToSet}' language initialization.'`);
}, () => {
resolve(null);
});
});
});
}
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
HomePageComponent,
MsgPipe
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes),
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: appInitializerFactory,
deps: [TranslateService, Injector],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
(The code above was taken from here)
My pipe still doesn't work unless pure is set to false, causing multiple unnecessary calls. No errors, it just doesn't change the content.
You do not any extra library for translations. As an example, you only need a pipe file
translation-pipe.ts
file andtranslation.provder.ts
file and you can extend whatever you want. Please check the below filestranslation-pipe.ts
TranslateProvider.ts
Here
private translate()
function is main function to change the local key to language. You can import local files like en.ts, sp.ts, au.ts etc. or you can modify this function to connect database and get the key value pairs... Example of local translation file isen.ts
or
tr.ts
Have a nice coding...
If you do the pipe impure works... but I think that is not the best way to solve that.