Header Ads Widget

Ticker

6/recent/ticker-posts

Pipe angular de 10 decimales: formato de números por ejemplo

 En este ejemplo, aprenderemos cómo usar la tubería decimal angular para formatear números.

Deberá tener algunos requisitos previos para este tutorial, como Node.js y Angular CLI v10 instalados en su máquina de desarrollo local.

Tubería angular de 10 decimales por ejemplo

A continuación, deberá crear un proyecto con el siguiente comando:

$ ng new Angular10DecimalPipeExample

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

Angular Decimal Pipe es una tubería integrada en Angular que se puede usar para formatear números decimales.

Cómo usar tubería decimal angular

La tubería decimal angular acepta dos parámetros, la información del dígito decimal y la configuración regional:


Abra el src/app/app.component.tsarchivo y agregue una variable de tipo número de la siguiente manera:

export class App implements OnInit {

  aNumber: number = 10.123456789;

  constructor() { }
  ngOnInit() {
  }

}

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera para usar la tubería decimal sin parámetros:


El resultado será:

// 10.123

Ahora cambie la información dada a la tubería decimal de la siguiente manera:


El resultado será:

// 0010.123456

Dado que nuestro número contiene solo dos dígitos antes del punto decimal, se rellenan dos ceros adicionales.

En nuestro ejemplo, configuramos la barra decimal para mostrar al menos 4 dígitos antes del punto decimal, un mínimo de 1 dígito y un máximo de 6 dígitos después del punto decimal.

Tubería decimal angular con configuración regional del país

También puede formatear números en sus plantillas de acuerdo con la configuración regional del país. Debe pasar el código de configuración regional del país como un segundo parámetro a la barra decimal. Por ejemplo:


Cómo usar la tubería decimal en componentes en Angular 10

También puede usar la tubería decimal de la clase de su componente. Veamos un ejemplo.

Primero, abra el src/app/app.module.tsarchivo y actualícelo de la siguiente manera:

import { NgModule,  } from '@angular/core';
import {DecimalPipe} from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent, CustomFormatterPipe } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent],
  providers: [DecimalPipe],
  bootstrap:    [ AppComponent,  ]
})
export class AppModule { }

Importamos DecimalPipedesde @angular/commony lo agregamos a la providersmatriz del módulo.

A continuación, abra el src/app/app.component.tsarchivo y actualícelo de la siguiente manera:

import { Component } from '@angular/core';
import {DecimalPipe} from '@angular/common';

@Component({
  selector: 'my-app',
  template:`
    <div> </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  num = 1.3765273;
  format = '2.0-2';
  result = null;

  constructor(private decimalPipe: DecimalPipe) { }

  ngOnInit(){

    this.result = this.decimalPipe.transform(this.num, this.format);
  }

}

Primero importamos DecimalPipedesde @angular/coreA continuación, lo inyectamos a través del constructor del componente.

Definimos tres variables numformatresultFinalmente llamamos al transform()método de DecimalPipe- pasamos la numvariable como primer parámetro y el formatcomo segundo parámetro. El número formateado se devolverá y se asignará a la resultvariable.

Conclusión

En este ejemplo, hemos visto cómo usar la tubería decimal en nuestra aplicación Angular 10 tanto en plantillas como en clases de componentes.

Publicar un comentario

0 Comentarios