Transloco Locale. How to add custom date filter?

Question

I am trying to extend the date filters transloco locale provides by default with some others that meet our customer requirements. However, documentation does not provide examples or good explanations about this. Have any of you managed to add custom filters to transloco locale library?

The only place where I found something was here and does not help much. It does not say where should I invoke those transformers classes: https://ngneat.github.io/transloco/docs/plugins/locale/

I appreciate your time, guys. Any help will be very welcome.

I created custom-transformer.ts as you have done and I implemented some dummy code there that will return initial value as is and just add some random string after that (just to test things out). I then added customTransformers (that const) to transloco-root.module.ts providers. However this way every language will use that custom transformer and I should check locale and do some switch case stuff with that. What I'd like to do is to use custom transformer only with specific languages and use default ones with rest of the languages. If anyone know how that can be done I'd like to know. — kivikall, Dec 17 '20 at 09:23

score 2 · Answer 1 · answered Aug 26 '20 at 09:53

finally got something working although through the use of angular pipes itself. I do not know if someone else will find this useful, but here are my two cents:

Background: The original idea was to be able to create a custom date pipe so we can provide specific formats. After investigation, I had discovered none of transloco locale service were enough to achieve my goals. Although they allow you to specify date formats, you have to stick to the bunch of options they provide. (See the LOCALE_DATE_FORMATS object) Original idea:

 import {TranslocoLocaleService} from "@ngneat/transloco-locale"; 

@Pipe({name: "culturePipe"}) 
export class CustomDatePipe implements PipeTransform { 

    public LOCALE_DATE_FORMATS: any = { 
        "fullDate" : {dateStyle: "medium", timeStyle: "medium"}, 
        "full": {dateStyle: "full", timeStyle: "full"} 
      }; 
    constructor(private _localeService: TranslocoLocaleService) { 
            this.locale = _localeService.getLocale();
         
          } 
    
    public transform(value: any, format?: string, timezone?: string, locale?: string): string | null { 
        if (value) { 
          return this._localeService.localizeDate(value, this.locale, this.LOCALE_DATE_FORMATS[format]); 
        } 
        return null;      
      }

Solution: I created a custom date pipe as follows:

import {Pipe, PipeTransform} from "@angular/core"; 
import {TranslocoLocaleService} from "@ngneat/transloco-locale"; 
import {DatePipe} from "@angular/common"; 
import {TranslocoService} from "@ngneat/transloco"; 
import {CultureService} from "@/services/shared-candidates/culture.service"; 
 
@Pipe({name: "cultureDatePipe"}) 
export class CultureDatePipe implements PipeTransform {     
 
 
  private LOCALE_DATE_FORMATS_ES_ES: any = { 
    ....
    "longDate": "d 'de' MMMM 'de' y", 
    ...

  }; 
 
  private LOCALE_DATE_FORMATS_EN_US: any = { 
   ...
    "longDate": "MMMM d, y", 
    ...
  }; 
  private readonly localeDatesFormats: any; 
  private datePipe: DatePipe; 
  constructor(private _localeService: TranslocoLocaleService, 
              private _translationService: TranslocoService) { 
 
    let locale = this._localeService.getLocale(); 
    switch (locale) {           
      case CultureService.SPANISH_LOCALE: 
        this.localeDatesFormats = this.LOCALE_DATE_FORMATS_ES_ES; 
        break; 
      default: 
        this.localeDatesFormats = this.LOCALE_DATE_FORMATS_EN_US; 
    } 
    this.datePipe = new DatePipe(locale); 
  } 
 
  public transform(value: any, format?: string, timezone?: string, locale?: string): string | null { 
    if (value) { 
      return this.datePipe.transform(value, this.localeDatesFormats[format], undefined, this._translationService.getActiveLang()); 
    } 
  } 
}

Usage:

Programatically

constructor(...
            private _dateTransform: CultureDatePipe) {
  }


...
 let date =  this._dateTransform.transform(dueDateISO, "longDate");
...

in-line

 <div class="date-line">{{params.date | culturePipe : "longDate" }}</div>

Transloco Locale. How to add custom date filter?

1 Answers1