En este artículo vamos a ver qué es DemicalPipe en Angular 10 y cómo usarlo. El DemicalPipe se utiliza para dar formato a un valor de acuerdo con las opciones de dígitos y las reglas locales.
Sintaxis:
{{ value | number}}
NgModule: El módulo utilizado por DecimalPipe es:
- CommonModule
Acercarse:
- Cree una aplicación angular para usar.
- No es necesario realizar ninguna importación para utilizar DecimalPipe.
- En app.component.ts define la variable que toma valor decimal.
- En app.component.html, use la sintaxis anterior para crear el elemento de fecha.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Parámetros:
- Valor: Toma un valor de string que se convierte a un decimal de acuerdo con las condiciones usando la tubería decimal.
Ejemplo 1:
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
pi: number = 2.33;
}
app.component.html
<p>
Number:
{{pi | number}}
</p>
<p>
<!-- In this '4.1-5' means 4 digits before .
and 1-5 digits after . depending
upon given digit -->
Number with 4 digits:
{{pi | number:'4.1-5'}}
</p>
Producción:
Ejemplo 2:
app.component.ts
import { Component, LOCALE_ID } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
num: number = 20*4;
}
app.component.html
<p>
Number:
{{num | number}}
</p>
<p>
<!-- In this '4.2' means 3 digits before .
and 2 digits after . which is 80-->
Number with 3 digits:
{{num | number:'3.2'}}
</p>
Producción:
Referencia: https://angular.io/api/common/DecimalPipe