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.

Answer 1

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>