CODEWITHSUNDEEP
angulartypescriptinternationalizationngx-translateangular-i18n
Jonathan
Jonathan

Reputation: 141

trying to inherit/extend the ngx-translate pipe function but returning empty string

exactly what it says in the title. I'm trying to inherit from the translatePipe but it results in an empty string. When I use the regular translatePipe everything works fine but when I change it to my custom dynamicTranslatePipe it's an empty string and not my translation. 

//shared.module.ts
import { CommonModule } from '@angular/common';
import { NgModule, ChangeDetectorRef } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateModule, TranslateLoader, TranslateService, LangChangeEvent, TranslatePipe } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';


// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient,'./assets/i18n/', '.json');
}  



@Pipe({name:'dynamicTranslate'})
export class dynamicTranslatePipe extends TranslatePipe implements PipeTransform{
  constructor( translate: TranslateService,  _ref: ChangeDetectorRef){
    super(translate, _ref)
  }

  transform(baseText: string): string { 

    let result = super.transform(baseText)
    return result
  }
}

@NgModule({
 imports: [ 
    CommonModule,
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      }),
    FontAwesomeModule,

    ],
 declarations: [ dynamicTranslatePipe ],
 exports:      [ CommonModule, FormsModule, TranslateModule, FontAwesomeModule, dynamicTranslatePipe ]
})
export class SharedModule { }

Upvotes: 0

Views: 1217

Answers (1)

subs
subs

Reputation: 2249

you have to use impure pipe by setting pure: false. 

@Pipe({
  name: 'dynamicTranslate',
  pure: false
})

But then your pipe will be run on every change detection. You may want to use changeDetection: ChangeDetectionStrategy.OnPush in your compnent decorator. With OnPush, bindings for the Component are only checked when an input property changes or when an event is triggered.

Upvotes: 2

Related Questions