Angular 10 getLocaleTimeFormat() Function - GeeksforGeeks

30 Apr, 2021
The getLocaleTimeFormat is used to get the localized time-value formatting for the given locale.
Syntax:
getLocaleTimeFormat(locale: string, width: FormatWidth): string
NgModule: Module used by getLocaleTimeFormat 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 getLocaleTimeFormat.import { LOCALE_ID, NgModule } from '@angular/core';
import { LOCALE_ID, NgModule } from '@angular/core';
In app.component.ts import getLocaleTimeFormat 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: String widths available for date-time formats.
Return value:
string: string of localized formatting 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,        getLocaleTimeFormat, TranslationWidth,         FormatWidth} from '@angular/common';  import { Component, Inject,OnInit, LOCALE_ID } from '@angular/core';  @Component({    selector: 'app-root',    templateUrl: './app.component.html'})export class AppComponent {    for = getLocaleTimeFormat(this.locale, FormatWidth.Short);    constructor(        @Inject(LOCALE_ID) public locale: string,){}      }
app.component.html
<h1>   GeeksforGeeks </h1>   <p>Time format is: {{for}}</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,        getLocaleTimeFormat, TranslationWidth,         FormatWidth} from '@angular/common';  import { Component, Inject,OnInit, LOCALE_ID } from '@angular/core';  @Component({    selector: 'app-root',    templateUrl: './app.component.html'})export class AppComponent {    for = getLocaleTimeFormat(this.locale,     FormatWidth.Full);    constructor(        @Inject(LOCALE_ID) public locale: string,){}      }
app.component.html
<h1>   GeeksforGeeks </h1>   <p>Time format is: {{for}}</p>
Output:
Reference: https://angular.io/api/common/getLocaleTimeFormat
Angular10
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?