How to pass parameters to pipes in Templates

In this article we will learn about How to pass parameters to pipes in Templates. We can pass parameters to the pipe. we have to use a specific format to pass parameters with using colon. Please read my previous article about How to use pipes in Component Class.

Let’s look at the below example pipe Decimal-Pipe where we are using the colon : to pass locale and specific way to display numbers. we can pass multiple parameters as well.

• On the below we create a decimal value in typescript.
• On the HTML markup we formatted to passing parameters to pipes in Templates.

export class AppComponent {
  myNumber :  number = 2896.597;
}

<div class="form-group">
    <label for="usr">Decimal Pipe Test:</label>
    <input type="number" [(ngModel)]="myNumber" class="form-control col-sm-6" id="usr">
  </div>
  
  <div class="mrg10">
    <h5>Result with no format:</h5>
    <p>{{myNumber | number}}</p>
  </div>
  <div class="mrg10">
    <h5>Result with format (2.1-6):</h5>
    <p>{{myNumber | number:'2.1-6'}}</p>
  </div>
  <div class="mrg10">
    <h5>Result with format (1.0-0):</h5>
    <p>{{myNumber | number:'1.0-0'}}</p>
  </div>
  <div class="mrg10">
    <h5>Result with format (3.1-5) and locale en:</h5>
    <p>{{myNumber | number:'3.1-5':'en'}}</p>
  </div>

Conclusion

In this article we will learnt about How to pass parameters to pipes in Templates. We can pass parameters to the pipe. we have to use a specific format to pass parameters with using colon.

Leave behind your valuable queries, suggestions in the comment section below regarding article How to Implement Repository Pattern in ASP.Net Core Web API. Also, if you think this article help to you, do not forget to share this within your developer community. Happy Coding 🙂

Related Articles

• How to host Angular app on AWS S3 bucket using CloudFront
• How to Deploy Angular App in GitHub Pages
• C Programming- Recursion in C
• C Program to Add Two Numbers Using Functions
• Steps to create Azure Resource Group
• Deploy ASP.Net Core apps to Azure App Service
• How to use Signature Pad Component in Angular
• How to use Drag and Drop items in Angular
• Ionic Framework Tutorial: Build your first Ionic cross-platform mobile app
• Difference between Injector, @Injectable & @Inject in Angular