Angular - Displaying localized currency - setting up locale to Norwegian (example)

This article will quickly describe how we can set up a locale for Angular; to display for example currency in a correct manner. First off we import the necessary locale setup in our main module, e.g. app.module.ts :

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import  localeNor from '@angular/common/locales/nb';
import  localeNorExtra from '@angular/common/locales/nb';

Note here that this setup targets Norwegian locale. You can see a list of these locales in the parent folder of this url: https://github.com/angular/angular/blob/master/packages/common/locales/nb.ts We also import the 'extra' information for locales - the Norwegian locale here. The parent folder show the available locales in this url: https://github.com/angular/angular/blob/master/packages/common/locales/extra/nb.ts Then we set up the Norwegian locale using the method registerLocaleData below the imports of our app module with a call to the method. registerLocaleData(localeNor, 'no', localeNorExtra); We also set up the providers for the app module to use the 'no' variable for LOCALE_ID A complete sample of the app module looks like this then:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import  localeNor from '@angular/common/locales/nb';
import  localeNorExtra from '@angular/common/locales/nb';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProductListComponent } from "src/app/products/product-list.component";
import { WelcomeComponent } from "src/app/home/welcome.component";

registerLocaleData(localeNor, 'no', localeNorExtra);

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
  ],
  providers: [
    {provide: LOCALE_ID, useValue: 'no'
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent }

    ])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

An example of using the locale setup is to be observed in the use of the pipe called currency. Sample markup:

  <td>{{ product.productCode | lowercase }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price  | currency:'NOK':'symbol':'1.2-2' }}</td>
            <td>

Note the syntax here: Inside the interpolation expression in Angular with {{ My_Expression }} as the notation we pipe with the '|' sign to the currency pipe then we add a ':' sign and the 'NOK' denotes the Norwegian currency. If we want 'øre' (Norwegian cents) afterwards, we can add that outside the interpolation expression. Note that we also add another ':' sign and then 'symbol':'1.2-2' This states that we show at least one digit for the integer part and between 2 and 2 decimals (i.e. just 2 decimals please). This shows how we can set up the standard locale of an Angular app. Supporting multiple aplications should then be a matter of importing additional locales for Angular and have some way of switching between locales. Probably it is best to be sure to usually addition both the locale and the 'locale extra' when setting this up.

Share this article on LinkedIn.