Criar um Pipe no Angular para Converter Data yyyy-mm-dd para dd/mm/yyyy

para angular criar um pipe que recebe uma data yyyy-mm-dd e devolve no formato dd/mm/yyyy

Para criar um pipe no Angular que converte uma data no formato yyyy-mm-dd para dd/mm/yyyy, você pode seguir os seguintes passos:

1. Gerar o Pipe: Use o Angular CLI para gerar um novo pipe.

   ng generate pipe DateFormat
   

2. Implementar o Pipe: Abra o arquivo gerado date-format.pipe.ts e implemente a lógica de conversão de data.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;

    // Verifica se a data está no formato yyyy-mm-dd
    const dateParts = value.split('-');
    if (dateParts.length !== 3) return value;

    const [year, month, day] = dateParts;
    return `${day}/${month}/${year}`;
  }

}

3. Registrar o Pipe no Módulo: Certifique-se de que o pipe está registrado no módulo apropriado. Normalmente, isso é feito automaticamente pelo Angular CLI, mas verifique o arquivo app.module.ts ou o módulo onde você deseja usar o pipe.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DateFormatPipe } from './date-format.pipe'; // Importe o pipe

@NgModule({
  declarations: [
    AppComponent,
    DateFormatPipe // Adicione o pipe às declarações
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Usar o Pipe no Template: Agora você pode usar o pipe no template de qualquer componente.

<!-- Suponha que a data seja '2023-10-05' -->
<p>{{ '2023-10-05' | dateFormat }}</p>
<!-- Isso exibirá: 05/10/2023 -->

Com esses passos, você criou um pipe personalizado no Angular que converte datas do formato yyyy-mm-dd para dd/mm/yyyy.