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:
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!