CODEWITHSUNDEEP
angulardatengx-translate
Greg-A
Greg-A

Reputation: 862

How to change the date format when changing languages from a pipe

I have a pipe that allows me to change the format of a date according to the format eeee d MMMM yyyy.

I use date-fns to change the date format and use local libraries to change the translation.

I also use ngx-translate to translate the application.

When I open the application the pipe changes the date format with the right translations, but when I change languages the pipe does not update.

here is the pipe used :

   import { Pipe, PipeTransform } from '@angular/core';
   import { LangChangeEvent, TranslateService } from '@ngx- 
   translate/core';
   import { format } from 'date-fns';
   import { enGB } from 'date-fns/locale'
   import { fr } from 'date-fns/locale'

   @Pipe({name: 'convertDate'})
   export class ConvertDate implements PipeTransform {
   constructor(public _translateSrvc: TranslateService) {}
   transform(value: string) {

   let formatter: string = this._translateSrvc.currentLang === 'fr' ? 'eeee d MMMM yyyy' : 'eeee d MMMM yyyy';
   let localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
   let resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: localeLang});

   this._translateSrvc.onLangChange.subscribe((event: LangChangeEvent) => {
   localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
   resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: localeLang});
  });

    return resultDate;
  }
}

the detection of the change of language confirms me that the language has changed and the format change is also done well

this._translateSrvc.onLangChange.subscribe((event: LangChangeEvent) => {
     localeLang = this._translateSrvc.currentLang === 'fr' ? fr : enGB;
     resultDate = format(new Date(value), 'eeee d MMMM yyyy', {locale: 
     localeLang});
 });

but the pipe does not return the new format

here is the component used :

  import {Component} from '@angular/core';
  import {TranslateService} from '@ngx-translate/core';

  @Component({
  selector: 'app-root',
  template: `
  <div>
  <h2>{{ 'HOME.TITLE' | translate }}</h2>
  <label>
    {{ 'HOME.SELECT' | translate }}
    <select #langSelect (change)="translate.use(langSelect.value)">
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
    </select>
  </label>

  <div *ngFor="let player of players"> 
  <ul>
    <li>{{player.date | convertDate}}</li>
  </ul>
  </div>
</div>
 `,
})
export class AppComponent {
  constructor(public translate: TranslateService) {
translate.addLangs(['en', 'fr']);
translate.setDefaultLang('en');

const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
 }

  players  = [{name: 'Gene', team: 'team alpha', date: '2019-09-18T16:45:42' },
 {name: 'Steve', team: 'team gamma', date: '2019-09-18T15:45:42'},
 {name: 'George', team: 'team beta', date: '2019-09-18T12:45:42'},
 {name: 'Paula', team: 'team beta', date: '2019-09-18T15:45:42'},
 {name: 'Jhon', team: 'team gamma', date: '2019-09-18T15:45:42'}];
}

Stackbiltz demo

How to make the pipe change the format instantly when the language changes?

Upvotes: 2

Views: 5065

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

You need to add the following in decoration:

pure: false

Try like this:

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

Working Demo

For more info on pure, read this article

Upvotes: 4

Related Questions