Angular10 getLocaleEraNames() Function
In this article, we are going to see what is getLocaleEraNames in Angular 10 and how to use it.
The getLocaleEraNames is used to get the Gregorian-calendar eras for the given locale.
Syntax:
getLocaleEraNames(locale: string, width: TranslationWidth)
NgModule: Module used by getLocaleEraNames is:
- CommonModule
Approach:
- Create the angular app to be used
- In app.module.ts import LOCALE_ID because we need locale to be imported for using get getLocaleEraNames.
import { LOCALE_ID, NgModule } from '@angular/core';
- In app.component.ts import getLocaleEraNames and LOCALE_ID
- inject LOCALE_ID as a public variable.
- In app.component.html show the local variable using string interpolation
- serve the angular app using ng serve to see the output.
Parameters:
- locale: A string containing locale code with rules.
- width: The character width.
Return value:
- array: array containing era names.
Example 1:
app.module.ts
import { LOCALE_ID, NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [ { provide: LOCALE_ID, useValue: 'en-GB' }, ], bootstrap: [AppComponent] }) export class AppModule { } |
app.component.ts
import {FormStyle, getLocaleEraNames, TranslationWidth } from '@angular/common' ; import {Component, Inject,OnInit, LOCALE_ID } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' }) export class AppComponent { code = getLocaleEraNames( this .locale, TranslationWidth.Wide); constructor( @Inject(LOCALE_ID) public locale: string,){} } |
app.component.html
< h1 > w3wiki </ h1 > < p >Era Names is : {{code}}</ p > |
Output:
Example 2:
app.module.ts
import { LOCALE_ID, NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [ { provide: LOCALE_ID, useValue: 'en-GB' }, ], bootstrap: [AppComponent] }) export class AppModule { } |
app.component.ts
import {FormStyle, getLocaleEraNames, TranslationWidth } from '@angular/common' ; import {Component, Inject, OnInit, LOCALE_ID } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' }) export class AppComponent { era = getLocaleEraNames( this .locale, TranslationWidth.Wide); a= '' ; b= '' ; constructor( @Inject(LOCALE_ID) public locale: string,){ if ( this .era[0]== 'Before Christ' ){ this .a= 'BC' ; this .b= 'AD' ; } } } |
app.component.html
< h1 > w3wiki </ h1 > < p >Era Names: < li >{{a}}</ li > < li >{{b}}</ li > </ p > |
Output:
Reference: https://angular.io/api/common/getLocaleEraNames