Pipes in Angular

Angular 10 DemicalPipe API

Last Updated : 04 Aug, 2021

In this article, we are going to see what is DemicalPipe in Angular 10 and how to use it. The DemicalPipe is used to format a value according to digit options and locale rules.

Syntax:

{{ value | number}}

NgModule: Module used by DecimalPipe is:

CommonModule

Approach:

Create an Angular app to be used.
There is no need for any import for the DecimalPipe to be used.
In app.component.ts define the variable that takes decimal value.
In app.component.html use the above syntax to make the date element.
Serve the angular app using ng serve to see the output.

Parameters:

Value: It takes a string value that is converted to a decimal according to the conditions using the decimal pipe.

Example 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> 

Output:

Example 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> 

Output:

Reference: https://angular.io/api/common/DecimalPipe

Pipes in Angular

taran910

Improve

Article Tags :

Similar Reads

Angular 10 DatePipe API

In this article, we are going to see what is DatePipe in Angular 10 and how to use it. DatePipe is used to format a date value according to locale rules. Syntax: {{ value | date }} Approach:Â Create the angular app that to be used.There is no need for any import for the DatePipe to be used.In app.co

Angular 10 I18nPluralPipe API

In this article, we are going to see what is I18nPluralPipe in Angular 10 and how to use it. The I18nPluralPipe is a map that takes a string value that pluralizes according to given rules. Syntax: {{ value | i18nPlural : map [ : rule]}} NgModule: Module used by I18nPluralPipe is: CommonModule Approa

Angular 10 I18nSelectPipe API

In this article, we are going to see what is I18nSelectPipe in Angular 10 and how to use it. I18nSelectPipeÂ is a selector that is used to displays the string that matches the current value. Syntax: {{ value | i18nSelect : map}} NgModule: Module used by I18nSelectPipe is: CommonModule Â Approach:Â Cr

Angular 10 UpperCasePipe

In this article, we are going to see what is UpperCasePipe in Angular 10 and how to use it. The UpperCasePipeÂ is used to Transforms all the text to uppercase. Syntax: {{ value | uppercase }} NgModule: Module used by UpperCasePipe is: CommonModule Approach:Â Create the angular app to be usedThere is

Pipes in Angular

Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference. Prerequisites:To understand this article you should have knowledge of

Angular10 TitleCasePipe

In this article, we are going to see what is TitleCasePipe in Angular 10 and how to use it. TitleCasePipe is used to Transforms all the text to titlecase. Syntax: {{ value | TitleCasePipe }} NgModule: Module used by TitleCasePipe is: CommonModule Approach:Â Create the angular app to be usedThere is

Angular10 percentPipe

In this article, we are going to see what is percentPipe in Angular 10 and how to use it. The percentPipeÂ is used to Transform a number to a percentage string. Syntax: {{ value | percent [ : digitsInfo [ : locale ] ] }} NgModule: Module used by percentPipe is: CommonModule Approach: Create the angul

Angular Material Stepper

Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our applicati

Updates in Angular 12

Angular 12 is the latest version of the popular front-end web development framework. Angular released in May 2021 comes with several new features and improvements that enhance the performance, productivity, and stability of the framework. In this article, we will see different key features and impro

Angular 17 Attribute directive

In Angular, attribute directives are a powerful feature that allows you to manipulate the behavior and appearance of HTML elements. They are a fundamental building block for extending and customizing the behavior of components in Angular applications. In this article, we'll learn more about the conc