Formatação de números com pipes no Angular
Com o pipe DecimalPipe é possível
formatar números. No primeiro parâmetro
do pipe, passamos o número mínimo de
dígitos na parte inteira. No segundo parâmetro,
especificamos o número mínimo de dígitos na
parte fracionária. No terceiro parâmetro opcional,
definimos o número máximo de dígitos na parte fracionária.
Apesar de nosso pipe se chamar
DecimalPipe, para usá-lo escrevemos
assim: number.
Vamos experimentar na prática. Na classe do componente, vamos definir o seguinte número:
export class AppComponent {
num: number = 18;
}
Exemplo
Vamos exibir nosso número de forma que na
sua parte inteira haja dois dígitos. Sendo que
o número mínimo de dígitos na parte fracionária
será 1:
<div>{{ num | number:'2.1' }}</div>
Resultado da execução do código:
<div>18.0</div>
Exemplo
Agora vamos definir que na parte fracionária do nosso número sejam exibidos dois dígitos:
<div>{{ num | number:'2.2' }}</div>
Resultado da execução do código:
<div>18.00</div>
Exemplo
Vamos definir um novo número:
export class AppComponent {
num: number = 18.67899;
}
E exibi-lo no template HTML de forma que na parte fracionária sejam mostrados no máximo dois dígitos:
<div>{{ num | number:'2.1-2' }}</div>
Resultado da execução do código:
<div>18.68</div>
Exemplo
Agora vamos formatar nosso número de forma que na sua parte inteira haja três dígitos. E na parte fracionária sejam exibidos cinco dígitos:
<div>{{ num | number:'3.5-6' }}</div>
Resultado da execução do código:
<div>018.67899</div>
Exemplo
Vamos tentar exibir o número mínimo de dígitos na parte fracionária que exceda a quantidade definida no número. No nosso caso, vamos exibir seis dígitos:
<div>{{ num | number:'3.6-8' }}</div>
Como resultado da execução do código, veremos
que o pipe DecimalPipe adicionou um zero
à parte fracionária:
<div>018.678990</div>
Tarefas práticas
Dado o número:
num: number = 15;
Formate-o da seguinte forma:
'015.000'
Dado o número:
num: number = 12.345;
Formate-o da seguinte forma:
'0012.345'
Dado o número:
num: number = 12.345;
Formate-o da seguinte forma:
'12.3'
Dado o número:
num: number = 12.345;
Formate-o da seguinte forma:
'012.34500'
Dado o número:
num: number = -7.261;
Formate-o da seguinte forma:
'-007.3'
Dado o número:
num: number = 100.261923;
Formate-o da seguinte forma:
'100.9226130'
Dado o número:
num: number = 100.926613;
Formate-o da seguinte forma:
'0100.93'
