Trying to translate NgPickDateTime labels when user change page lang

user_10299982 0
Viewed 2459

I'm using NgPickDatetime in my Angular app (https://danielykpan.github.io/date-time-picker/) and I have a problem when i try to translate labels and messages. I follow the instructions in the documentation and It works fine, but the problem is when I change the site language, the labels still in the previous language.

My code is:

datetime-locale.module.ts:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';
import { DefaultIntl } from './datepicker-locale.component';


@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OwlDateTimeIntl, useClass: DefaultIntl},
    ],
})
export class DateTimeLocaleModule {
}

datepicker-locale.component.ts:

import { OwlDateTimeIntl } from 'ng-pick-datetime';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor() {
        super();

        this.getLang();
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
            default:
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};

So i'm trying to add ngx-translate to component and reload getLang() function when the user change language, but it's doesn't work, because I get the following error:

Uncaught Error: Can't resolve all parameters for DefaultIntl: (?).

The full code of the component with translate service is:

import { OwlDateTimeIntl } from 'ng-pick-datetime';
import { TranslateService } from '@ngx-translate/core';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor(private translate: TranslateService) {
        super();

        this.getLang();

        this.translate.onLangChange.subscribe(lang => {
            this.getLang();
        });
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
            default:
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};

I need to use translate service, but I can't do in the component. Is there any solution of this problem ?

Thanks!!!

ngx-translate angular5 angular6 angular javascript
3 Answers

I solved adding this: 

@Inject(TranslateService) private translate

into constructor, the full code is:

import { OwlDateTimeIntl } from 'ng-pick-datetime';
import { TranslateService } from '@ngx-translate/core';
import { Inject } from '@angular/core';

export class DefaultIntl extends OwlDateTimeIntl {
    public cancelBtnLabel = 'Annuleren';
    public setBtnLabel = 'Opslaan';
    private currentLang;

    constructor(@Inject(TranslateService) private translate) {
        super();

        this.getLang();

        this.translate.onLangChange.subscribe(lang => {
            this.getLang();
        });
    }

    public getLang() {
        this.currentLang = JSON.parse(localStorage.getItem("language"));

        switch (this.currentLang.id) {
            case 'en':
                this.cancelBtnLabel = 'Cancel';
                this.setBtnLabel = 'Set';
                break;
            case 'nl':
                this.cancelBtnLabel = 'Annuleren';
                this.setBtnLabel = 'Opslaan';
                break;
        }
    }
};
user_102999820

To set the datepicker labels Cancel and Set without regionalization:

Create a component and extend OwlDateTimeIntl :

import { OwlDateTimeIntl } from 'ng-pick-datetime';

export class SetPickerLabels extends OwlDateTimeIntl {
public cancelBtnLabel = 'TEXT FOR CANCEL';
public setBtnLabel = 'TEXT FOR SET';
};

In the module where you imported ng-pick-datetime, import the component, and use as a class for OwlDateTimeIntl provider:

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl} from 'ng-pick-datetime';
import { SetPickerLabels } from './set-picker-labels.component';


@NgModule({
imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
providers: [
    {provide: OwlDateTimeIntl, useClass: SetPickerLabels},
],
})

Tested on Angular 6 and Angular 7

user_83905890

I think you'll have to import the TranslateModule to help your DateTimeLocaleModule module understand what TranslateService is

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OwlDateTimeIntl } from 'ng-pick-datetime';
import { DefaultIntl } from './datepicker-locale.component';

@NgModule({
  imports: [
    OwlDateTimeModule, 
    OwlNativeDateTimeModule,
    TranslateModule.forRoot()
  ],
  providers: [{
    provide: OwlDateTimeIntl,
    useClass: DefaultIntl
  }],
})
export class DateTimeLocaleModule {}

I think that Angular wasn't really aware of the TranslateService which is exposed as a part of TranslateModule and that's why it was giving this error. with this change though, it should work as expected.

user_26222920
Related