A locale setting configures locale-sensitive presentation in an Angular application. It changes conventions such as number punctuation, percentage spacing, currency-symbol placement, and date output without changing the underlying values. section 17.4.1 section 17.4.2
Use the application locale to establish defaults, or override it for a particular pipe:
- Angular defaults to en-US; another locale such as fr-FR must be imported and registered with registerLocaleData, then configured through the application providers. section 17.4.1
- Number formatting remains controlled by digit information such as "3.2-2", while the locale determines the localized presentation. section 17.4.1
- Percentage formatting can show differences such as 10% in en-US versus 10 % in fr-FR; values above 1 produce percentages above 100%. section 17.4.3
- Currency formatting uses an explicitly supplied currency code and does not automatically select a currency from the locale, although number formatting and symbol placement are localized. section 17.4.2
- Date formatting accepts a locale together with a time-zone argument; use an empty time-zone string to retain the application’s default time zone. section 17.4.4
French formatting in a product table
Register fr-FR and provide it as the application locale. A number such as {{ item.price | number:"3.2-2" }} then follows French conventions. A currency binding such as {{ item.price | currency:"USD":"symbol":"2.2-2" }} still represents U.S. dollars, but its localized number format and symbol placement follow fr-FR. A date can use {{ dateObject | date:"shortDate":"UTC":"fr-FR" }}. section 17.4.1 section 17.4.2 section 17.4.4
Listing 17.15. Setting the locale in the app.module.ts file in the src/app folder
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ProductComponent } from './component';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { PaAttrDirective } from "./attr.directive";
import { PaModel } from "./twoway.directive";
import { PaStructureDirective } from "./structure.directive";
import { PaIteratorDirective } from "./iterator.directive";
import { PaCellColor } from "./cellColor.directive";
import { PaCellColorSwitcher } from "./cellColorSwitcher.directive";
import { ProductTableComponent } from "./productTable.component";
import { ProductFormComponent } from "./productForm.component";
import { PaToggleView } from "./toggleView.component";
import { PaAddTaxPipe } from "./addTax.pipe";
import { PaCategoryFilterPipe } from "./categoryFilter.pipe";
import { LOCALE_ID } from "@angular/core";
import localeFr from '@angular/common/locales/fr';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeFr);
@NgModule({
declarations: [ProductComponent, PaAttrDirective, PaModel,
PaStructureDirective, PaIteratorDirective,
PaCellColor, PaCellColorSwitcher, ProductTableComponent,
ProductFormComponent, PaToggleView, PaAddTaxPipe,
PaCategoryFilterPipe],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule, ReactiveFormsModule
],
providers: [{ provide: LOCALE_ID, useValue: "fr-FR" }],
bootstrap: [ProductComponent]
})
export class AppModule { }
Inspect the module configuration that imports locale data and enables fr-FR through the providers property. section 17.4.1
Listing 17.21. Formatting dates in the productTable.component.html file in the src/app folder
<div class="bg-info p-2 text-white">
<div>
Date formatted from object: {{ dateObject | date:"shortDate" }}
</div>
<div>
Date formatted from string: {{ dateString | date:"mediumDate" }}
</div>
<div>
Date formatted from number: {{ dateNumber | date:"longDate" }}
</div>
</div>
<div class="bg-info p-2 text-white">
<div>
Date formatted from object:
{{ dateObject | date:"shortDate":"UTC":"fr-FR" }}
</div>
<div>
Date formatted from string:
{{ dateString | date:"mediumDate":"UTC":"fr-FR" }}
</div>
<div>
Date formatted from number:
{{ dateNumber | date:"longDate":"UTC":"fr-FR" }}
</div>
</div>
<table class="table table-sm table-bordered table-striped">
<thead class="table-light">
<tr><th></th><th>Name</th><th>Category</th><th>Price</th>
<th></th></tr>
</thead>
<tbody>
<tr *paFor="let item of Products() | filter:categoryFilter;
let i = index; let odd = odd;
let even = even"
[class.table-info]="odd"
[class.table-warning]="even"
class="align-middle">
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price | addTax:(taxRate || 0)
| currency:"USD":"symbol":"2.2-2" }}
</td>
<td class="text-center">
<button class="btn btn-danger btn-sm"
(click)="deleteProduct(item.id)">
Delete
</button>
</td>
</tr>
</tbody>
</table>
Compare predefined date formats and explicit UTC and fr-FR arguments in a working template. section 17.4.4
