CODEWITHSUNDEEP
javascriptangulardatelocale
Ivan Rodriguez
Ivan Rodriguez

Reputation: 436

How to set locale in extend datapipe in angular 4?

I have a custom pipe extended from DataPipe Angular class.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateTimeFormater'
})
export class DateTimeFormaterPipe extends DatePipe implements PipeTransform {
  transform(value: any): string {
    const currentDay = new Date().getDay();
    const itemDate = new Date(value);
    const elementDay = itemDate.getDay();
    const format = currentDay === elementDay ? DatePipe['_ALIASES'].mediumTime : DatePipe['_ALIASES'].shortDate;
    return super.transform(value, format );
  }
}

I need to set locale (global) value from user language (not browser configuration). This value is getting from database when user login into application. I have this value in app.module for example.

Base class have a constructor with locale parameter but I don't know how to make a call with locale value. This value could be diferent depending on the context or user settings.

//common/pipes/ts/date_pipe.ts (angular code)

export declare class DatePipe implements PipeTransform {
  private _locale;
  constructor(_locale: string);
    transform(value: any, pattern?: string): string | null;
}

Upvotes: 0

Views: 1049

Answers (1)

Isaac Obella
Isaac Obella

Reputation: 2643

Based on the base class i have in my Angular 5 version.

export declare class DatePipe implements PipeTransform {
    private locale;
    constructor(locale: string);
    transform(value: any, format?: string, timezone?: string, locale?: string): string | null;
}

You could pass in the locale as a constructor to your pipe using this format of the pipe.

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateTimeFormater'
})
export class DateTimeFormaterPipe extends DatePipe implements PipeTransform {

    constructor(locale: string){
        super(locale);
    }
  transform(value: any,format?:string): string {
    const currentDay = new Date().getDay();
    const itemDate = new Date(value);
    const elementDay = itemDate.getDay();
    const format = currentDay === elementDay ? DatePipe['_ALIASES'].mediumTime : DatePipe['_ALIASES'].shortDate;
    return super.transform(value, format );
  }
}

Then use it like this.

new DateTimeFormaterPipe('en-US').transform(date_value, 'yyyy-MM-dd HH:mm:ss')

Where 'en-US' is your locale.

Upvotes: 1

Related Questions