En este artículo, veremos qué es getLocaleDayNames en Angular 10 y cómo usarlo.
getLocaleDayNames se utiliza para obtener los días de la semana para la configuración regional dada.
Sintaxis:
getLocaleDayNames( locale: string, formStyle: FormStyle, width: TranslationWidth )
NgModule: El módulo utilizado por DayNames es:
- CommonModule
Acercarse:
- Cree la aplicación angular que se utilizará
- En app.module.ts importa LOCALE_ID porque necesitamos que se importe la configuración regional para usar getLocaleDayNames.
import { LOCALE_ID, NgModule } from '@angular/core';
- En app.component.ts importe FormStyle, getLocaleDayNames, TranslationWidth y LOCALE_ID
- inyecte LOCALE_ID como una variable pública y escriba el código para obtener los días de la semana usando la variable de configuración regional.
- En app.component.html muestra la variable local usando la interpolación de strings
- sirva la aplicación angular usando ng serve para ver el resultado.
Parámetros:
- locale: Un código local con reglas.
- formStyle: el estilo de formulario en el que se mostrarán los días
- ancho: El ancho total tomado.
Valor de retorno:
- array: una array del nombre del día.
Ejemplo 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, getLocaleDayNames, TranslationWidth } from '@angular/common'; import {Component, Inject,OnInit, LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { day = getLocaleDayNames( this.locale, FormStyle.Standalone, TranslationWidth.Wide ); constructor( @Inject(LOCALE_ID) public locale: string,){} }
app.component.html
<h1> GeeksforGeeks </h1> <p>Days of week are : {{day}}</p>
Producción:
Ejemplo 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, getLocaleDayNames, TranslationWidth } from '@angular/common'; import {Component, Inject, LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { day = getLocaleDayNames(this.locale, FormStyle.Standalone, TranslationWidth.Wide); constructor( @Inject(LOCALE_ID) public locale: string,){ console.log(this.day) } }
Producción:
Referencia: https://angular.io/api/common/getLocaleDayNames