Open In App

Angular10 getLocaleDayPeriods() Function

Last Updated : 04 Aug, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see what is getLocaleDayPeriods in Angular 10 and how to use it.

The getLocaleDayPeriods used to get the day period strings for the given locale.

Syntax:

getLocaleDayPeriods(locale: string, 
                    formStyle: FormStyle, 
                    width: TranslationWidth)

NgModule: Module used by getLocaleDayPeriods 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 getLocaleDayPeriods.
import { LOCALE_ID, NgModule } from '@angular/core';
  • In app.component.ts import getLocaleDayPeriods 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.
  • formStyle: The form style.

Return value:

  • array: array of localized period strings.

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,
        getLocaleDayPeriods, 
        TranslationWidth } 
        from '@angular/common';
  
import {Component, 
        Inject, 
        LOCALE_ID } 
        from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    dir = getLocaleDayPeriods(this.locale, 
                        FormStyle.Standalone, 
                        TranslationWidth.Wide);
    constructor(
        @Inject(LOCALE_ID) public locale: string,){}
      }


app.component.html




<h1>
   GeeksforGeeks
</h1>
 <p>Locale Time is : {{dir}}</p>


Output:

Reference: https://angular.io/api/common/getLocaleDayPeriods



Similar Reads

Angular10 getLocaleWeekEndRange() Function
In this article, we are going to see what is getLocaleWeekEndRange in Angular 10 and how to use it. The getLocaleWeekEndRange is used to get the range of week days for the given locale. Syntax: getLocaleWeekEndRange(locale : string): [WeakDay, WeakDay] NgModule: Module used by getLocaleWeekEndRange is: CommonModule Approach: Create an angular app.I
2 min read
Angular10 getLocaleFirstDayOfWeek() Function
In this article, we are going to see what is getLocaleFirstDayOfWeek in Angular 10 and how to use it. The getLocaleFirstDayOfWeek is used to get the first day of the week for the given locale. Syntax: getLocaleFirstDayOfWeek(locale : string): WeekDay NgModule: Module used by FirstDayOfWeek is: CommonModule Approach: Create the angular app.In app.mo
2 min read
Angular10 getLocaleDayNames() Function
In this article, we are going to see what is getLocaleDayNames in Angular 10 and how to use it. The getLocaleDayNames is used to get days of the week for the given locale. Syntax: getLocaleDayNames( locale: string, formStyle: FormStyle, width: TranslationWidth ) NgModule: Module used by DayNames is: CommonModule Approach: Create the angular app to
2 min read
Angular10 getLocaleDirection() Function
In this article, we are going to see what is getLocaleDirection in Angular 10 and how to use it. The getLocaleDirection is used to get the writing direction for the given locale. Syntax: getLocaleDirection(locale: string): 'ltr' | 'rtl' NgModule: Module used by getLocaleDirection is: CommonModule Approach: Create the angular app to be usedIn app.mo
2 min read
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 u
2 min read
Angular10 getLocaleCurrencySymbol() Function
In this article, we are going to see what is getLocaleCurrencySymbol in Angular 10 and how to use it. The getLocaleCurrencySymbol is used to get the currency symbol for the given locale. Syntax: getLocaleCurrencySymbol(locale: string): string | null NgModule: Module used by getLocaleCurrencySymbol is: CommonModule Approach: Create the angular app t
2 min read
Angular10 getLocaleCurrencyName() Function
In this article, we are going to see what is getLocaleCurrencyName in Angular 10 and how to use it. The getLocaleCurrencyName is used to get the currency name for the given locale. Syntax: getLocaleCurrencyName(locale: string): string | null NgModule: Module used by getLocaleCurrencyName is: CommonModule Approach: Create the angular app to be usedI
2 min read
Angular10 getLocaleCurrencyCode() Function
In this article, we are going to see what is getLocaleCurrencyCode in Angular 10 and how to use it. The getLocaleCurrencyCode is used to get the default currency code for the given locale. Syntax: getLocaleCurrencyCode(locale: string): string | null NgModule: Module used by getLocaleCurrencyCode is: CommonModule Approach: Create the angular app to
2 min read
Angular10 getLocaleDateFormat() Function
In this article, we are going to see what is getLocaleDateFormat in Angular 10 and how to use it. The getLocaleDateFormat is used to get the localized date-value formatting for the given locale. Syntax: getLocaleDateFormat(locale: string, width: FormatWidth): string NgModule: Module used by getLocaleDateFormat is: CommonModule Approach: Create the
2 min read
Angular10 getLocaleDateTimeFormat() Function
In this article, we are going to see what is getLocaleDateTimeFormat in Angular 10 and how to use it. The getLocaleDateTimeFormat is used to get the localized date-time formatting for the given locale. Syntax: getLocaleDateTimeFormat(locale: string, width: FormatWidth): string NgModule: Module used by getLocaleDateTimeFormat is: CommonModule Approa
2 min read