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:
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 >
GeeksforGeeks
</ 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 >
GeeksforGeeks
</ h1 >
< p >Era Names:
< li >{{a}}</ li >
< li >{{b}}</ li >
</ p >
|
Output:
Reference: https://angular.io/api/common/getLocaleEraNames
Last Updated :
28 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...