Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] [Pipes em PT-BR] - Como converter pipe em pt-br no angular 17

Referente ao curso Angular 14: evoluindo a aplicação

por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Olá, pessoal

Estou tentando converter o texto do meu pipe de números e datas para o padrão brasileiro, porém o meu código abaixo não exibe, alguém pode me ajudar?

import { Component, LOCALE_ID } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CamelCasePipe } from "../../pipes/camel-case.pipe";

@Component({
  selector: 'exemplo-pipes',
  standalone: true,
  imports: [CommonModule, CamelCasePipe],
  
  providers: [
    {
      provide: LOCALE_ID, useValue: 'pt-BR'
    }
  ],
  templateUrl: './exemplo-pipes.component.html',
  styleUrl: './exemplo-pipes.component.css'
})
export class ExemploPipesComponent {

  livro : any = {
    titulo : "Design Patterns com Java: Projeto orientado a objetos guiado por padrões",
    rating: 4.74321,
    numeroPaginas: 314,
    preco: 44.99,
    dataLancamento: new Date(2014, 3, 16),
    dataPostagem: new Date(2014, 3, 16, 17,11,27),
    url: "https://l1nk.dev/hz07N" 
  }

}


<h5>Exemplos de Pipes</h5>

(Ele transforma um valor dentro de um template). Veja abaixo exemplos: <br><br>

<p> * Título: {{ livro.titulo | uppercase }} </p>
<p> * Título (alinhando pipes): {{ livro.titulo | uppercase | lowercase}} </p>
<p> * Título (CamelCase): {{ livro.titulo | camelCase }} </p>
<p> * Rating: {{ livro.rating | number : '2.1-2':'pt-BR'}} </p>
<p> * Número de Páginas: {{ livro.numeroPaginas | number }} </p>
<p> * Preço: {{ livro.preco | currency:'BRL'}} </p>
<p> * Data de Lançamento: {{ livro.dataLancamento | date : 'dd/MM/yyyy'}}</p>
<p> * Mês de Lançamento: {{ livro.dataLancamento | date : 'MMM'}}</p>
<p> * Data de Postagem: {{ livro.dataPostagem | date : 'dd/MM/yyyy  - HH:mm:ss'}}</p>
<p> * URL: {{ livro.url }} </p>
<p> * JSON: {{ livro | json }} </p><br>



Referências:<br>
* Link sobre pipes: https://v17.angular.io/guide/pipes-overview<br>
<br>
(No angular não existe mais filtro e order by no angular 2)<br>
CommonModule tem os pipes<br>
<br>
<button class="btn btn-primary">Teste</button>
3 respostas
por Natália Melgaço Pereira Torres
| 17.6k xp | 9 posts
Desenvolvedora de Software Pleno

Olá Anderson, tudo bem? Aparece algum erro no console ou simplesmente não exibe em tela (sem mensagens no console)?

Uma possível causa para não aparecer alguns valores em tela é que o locale pt-BR não está registrado na sua aplicação. Para registrar, talvez seja preciso a importação dos dados do locale no seu módulo de aplicação e o registro dele com registerLocaleData.

Tente isso:

// Passo 1: Importe o locale pt-BR e a função registerLocaleData

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

// Passo 2: Registre o locale pt-BR
registerLocaleData(localePt);

// Passo 3: Adicione o LOCALE_ID ao array de providers no seu módulo principal
...
  providers: [
    { provide: LOCALE_ID, useValue: 'pt-BR' }  // Configura o locale pt-BR 
  ],
...

Espero que ajude!

solução!
por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Olá, Natália

Adicionei no meu "app.config.ts" . O seguinte código:

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import { provideRouter } from '@angular/router';
import localePt from '@angular/common/locales/pt';

import { routes } from './app.routes';
import { registerLocaleData } from '@angular/common';

registerLocaleData(localePt);

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-BR'
    },
    provideRouter(routes)
  ]
};

e voltou a funcionar, obrigado.

por Natália Melgaço Pereira Torres
| 17.6k xp | 9 posts
Desenvolvedora de Software Pleno

Maravilha Anderson! Bom que funcionou, fico feliz em ter ajudado. Bom estudo!