title: How to extend ngx-translate pipe
body: <p>I want to extend ngx-translate's pipe to make it potentially multi purpose within my app.</p>
  
  <p>My pipe:</p>
  
  <pre><code>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)
    }
  }
  </code></pre>
  
  <p>In order to wait for the relevant translate modules to load, I have used Angular's APP_INITIALIZER:</p>
  
  <p>app.module:</p>
  
  <pre><code>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 () =&gt; new Promise&lt;any&gt;((resolve: any) =&gt; {
          const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
          locationInitialized.then(() =&gt; {
              const langToSet = 'en'
                translate.setDefaultLang('en');
              translate.use(langToSet).subscribe(() =&gt; {
                  console.info(`Successfully initialized '${langToSet}' language.'`);
              }, err =&gt; {
                  console.error(`Problem with '${langToSet}' language initialization.'`);
              }, () =&gt; {
                  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 { }
  </code></pre>
  
  <p>(The code above was taken from <a href="https://github.com/ngx-translate/core/issues/517" rel="nofollow noreferrer">here</a>) </p>
  
  <p>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.</p>