CODEWITHSUNDEEP
angularlocalizationangular17angular-localize
user2959635
user2959635

Reputation: 270

Change default Locale in Angular 17

How can I set the default locale in Angular 17?

In angular.json I added

  "projects": {
    "myproject": {
  ....
        "i18n": {
          "sourceLocale": "it-IT"
        }
      },

in main.ts

import localeIt from '@angular/common/locales/it';
import localeItExtra from '@angular/common/locales/extra/it';
import { registerLocaleData } from '@angular/common';
  registerLocaleData(localeIt, 'it-IT',localeItExtra);

and in package.json

"@angular/localize": "^17.3.2",

but when in a template I write

 test number {{12.234|number}} test currency {{45.657|currency}}

I get

test number 12.234 test currency $45.66

instead of

test number 12,234 test currency €45.66

where am I wrong?

Upvotes: 2

Views: 4885

Answers (1)

Naren Murali
Naren Murali

Reputation: 57696

I followed the below steps.

  1. run the below command to add angular localize

command

ng add @angular/localize
  1. In the bootstrap application, we can add the below confiuration { provide: LOCALE_ID, useValue: 'it-IT' } into the providers array

code

bootstrapApplication(App, {
  providers: [{ provide: LOCALE_ID, useValue: 'it-IT' }],
});
  1. I did the same thing you provided, I added the registerLocaleData

code

...
import { Component, LOCALE_ID } from '@angular/core';
import localeIt from '@angular/common/locales/it';
import localeItExtra from '@angular/common/locales/extra/it';

registerLocaleData(localeIt, 'it-IT', localeItExtra);
...

full code

/// <reference types="@angular/localize" />

import { CommonModule, registerLocaleData } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { Component, LOCALE_ID } from '@angular/core';
import localeIt from '@angular/common/locales/it';
import localeItExtra from '@angular/common/locales/extra/it';

registerLocaleData(localeIt, 'it-IT', localeItExtra);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    test number {{12.234|number}} test currency {{45.657|currency}}
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [{ provide: LOCALE_ID, useValue: 'it-IT' }],
});

Stackblitz Demo

Upvotes: 5

Related Questions