2
respostas

Como mudar o locale do Angular 18?

Quero utilizar o DatePipe para formatar data no sistema porém o global do sistema está em en-US só que gostaria de mudar o padrão global do sistema para pt-BR para o horário ficar correto mas não achei uma forma de fazer isso na versão 18 do Angular.

2 respostas

Oi, Victor!

Do que testei aqui no seu arquivo app.module.ts, importe e registre o locale pt-BR:

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

// Registra a localidade pt-BR
registerLocaleData(localePt);

@NgModule({
  declarations: [
    AppComponent
    // outros componentes
  ],
  imports: [
    BrowserModule
    // outros módulos
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'pt-BR' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Logo depois configure o componente principal app.component.ts:**

Onde você vai formatar e exibir a data.

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DatePipe]
})
export class AppComponent {
  datePipe: DatePipe;
  currentDate: Date = new Date(); // Definindo a data atual

  constructor() {
    this.datePipe = new DatePipe('pt-BR');
  }

  getFormattedDate(date: Date): string {
    // Usa 'Data inválida' se a data for null ou não puder ser formatada
    return this.datePipe.transform(date, 'fullDate') || 'Data inválida';
  }
}
  • currentDate: Inicializa com a data atual.
  • getFormattedDate(date: Date): Formata a data e retorna uma string, com "Data inválida" como fallback.

Por fim, ai é com voce no seu template app.component.html, configure como desejar:

<div>
  Data formatada: {{ getFormattedDate(currentDate) }}
</div>

Saída:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Por fim deixo duas soluções para que você possa testar, verifique a que melhor se adaptar para o seu código:

Além da documentação

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Estou tendo problema com o DatePicker, quando digito 18/11/2024 por exemplo, ele inverte para 11/18/2024 mesmo o MatDatePicker estar configurado pt-BR