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:

app/app.component.tsexport 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:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

Resultado da execução do código:

html<div>18.0</div>

Exemplo

Agora vamos definir que na parte fracionária do nosso número sejam exibidos dois dígitos:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

Resultado da execução do código:

html<div>18.00</div>

Exemplo

Vamos definir um novo número:

app/app.component.tsexport 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:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

Resultado da execução do código:

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

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

Resultado da execução do código:

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

app/app.component.html<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:

html<div>018.678990</div>

Tarefas práticas

typescriptnum: number = 15;

typescript'015.000'

typescriptnum: number = 12.345;

typescript'0012.345'

typescriptnum: number = 12.345;

typescript'12.3'

typescriptnum: number = 12.345;

typescript'012.34500'

typescriptnum: number = -7.261;

typescript'-007.3'

typescriptnum: number = 100.261923;

typescript'100.9226130'

typescriptnum: number = 100.926613;

typescript'0100.93'