Use a pipe to show the content of the md-input

In my Angular 2 Material application, I have a form that includes a price input:

  <md-input [(ngModel)]="price" placeholder="Price">
  </md-input>{{price|customCurrency}}

This input field uses a custom version of the CurrencyPipe which you can see in action on this Plnkr:

http://plnkr.co/edit/OM039CYEsS5CfhEuZdBN?p=preview

Instead of displaying the raw input value like this:

  Price
  100              $1.00

I would like to apply the customCurrency pipe directly to the input field display value so it appears as follows:

  Price
  $1.00

Is there a way to achieve this where the pipe is applied to the display value as you type, or at least on blur?

angulartypescriptangular2-material

Answer №1

At the moment, Angular 2 does not support this feature; for more information, refer to Angular 2 issue 13140. As a workaround, you can try the following code:

  <md-input [(ngModel)]="Price" placeholder="Price: {{price|customCurrency">
  </md-input>

This solution may improve the appearance slightly:

  Price: $1.00
  100

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TypeScript making erroneous assumptions about property values post-setting

My TypeScript object has a boolean property that causes some confusion. When I update the object's value to false, TypeScript seems to believe it will remain false indefinitely (at least within the scope), even though it can be modified: const obj = { ...

typescript

The code snippet for the React TypeScript Cheatsheet in the Portal sample appears to be malfunction

I have implemented a strict version of TypeScript and ESLint in my project. The code for this portal was originally sourced from the documentation available here: After making some modifications, the code now looks like this: import React, { useEffect, u ...

javascriptreactjstypescript

Is it possible to prevent the Virtual Keyboard from automatically appearing on mobile devices?

Whenever a user enters a number on a page component, the Virtual Keyboard on their Mobile device pops up and shifts the entire page. I am looking for a solution to either disable the on-screen keyboard or ensure that the text box remains visible even when ...

angulartypescriptmobile-website

Error: Angular 4 encountered an unexpected character and could not parse

I am encountering an issue with a code snippet that looks like this: persona = { ... edadNiño = 9 } I'm trying to bind it using the following syntax: <input type="number" name="edadNiño" [(ngModel)] = "persona.edadNiño"> However, when I a ...

angular

Creating a unique theme export from a custom UI library with Material-UI

Currently, I am in the process of developing a unique UI library at my workplace which utilizes Material-UI. This UI library features a custom theme where I have integrated custom company colors into the palette object. While these custom colors work perfe ...

javascriptreactjstypescriptmaterial-ui

Extending State Interface in ReactJs and Typescript: A Step-by-Step Guide

I have the following: interface EditViewState<T> { entity?: T; } abstract class EditView<T, P, S> extends React.Component<P, EditViewState<T> & S> { constructor(props: P, ctx: any) { super(props, ctx); this. ...

javascriptreactjstypescript

Having trouble loading static files in Django Angular framework? Specifically, images stored in the assets folder returning a

In my Angular project, I have an assets/image folder within the src directory where all my images are stored. Various components and child components in my app use these images like <img src"../../../assets/image/test.png">. After building my Angula ...

djangoangularnginxdjango-staticfiles

Exploring the concept of data sharing in the latest version of Next.JS - Server

When using App Router in Next.JS 13 Server Components, the challenge arises of not being able to use context. What would be the most effective method for sharing data between various server components? I have a main layout.tsx along with several nested la ...

javascripttypescriptnext.jsnext.js13app-router

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

javascriptangularrxjs

Create PDF/A compliant documents using NodeJS

Current System Information I am currently utilizing an Angular application to collect user inputs, which are then sent to a NodeJS service to create a PDF document. The pdfmake package is being used in this process. What I Need The current package does n ...

node.jsangularpdfpdf-generationpdfa

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

In This specific part of the Angular2 Tutorial there is a feature that allows users to add new items to an array. Somehow, when the item is added, the ID is automatically incremented but the exact process behind this automation remains a mystery. I am awa ...

arraysangulartypescript

What is the best approach to manage consecutive URL requests in RxJS while transferring data between them?

When calling a service, it is possible for the server to respond with a queue URL if it is too busy to handle the request. In my Angular service, I am struggling to determine which RXJS 6+ operator to use in order to handle these types of calls effectivel ...

angularrxjsangular7angular-httpclientrxjs6

Steps for associating ngclass with an observant value

Can you bind to an Observable<enum> like this in Angular? <a [ngClass]="{selected: (mapToolBarMode$ | async) === 0 }" /> or <a [ngClass]="{selected: (mapToolBarMode$ | async) === MapMode.Pan }" /> where the observable is named mapTool ...

angularrxjsobservable

Is there a way to determine the port being used by the http-server?

After using the command prompt to install the HTTP server with npm install http-server -g, I received a relevant path but no port number. How can I determine what the port number is? http://localhost:8080/index.html I encountered an error on IIS 8.5. ...

angularnpm

Transferring data from a parent ng-template to a child ng-template

Is it possible to nest one ng-template inside another ng-template? If so, how can I pass data from the parent ng-template to its child ng-template? I have tried several methods, but none of them seem to work for me. <ng-template let-r="result" #rt&g ...

angular

Retrieve data from a web api at regular intervals using Angular observables and subscription

My Launch method is designed to start an engine by taking parameters and returning the instance name once started. After that, I need to periodically query another service every 2 seconds to check if the status has changed to either "Succeeded" or "Faile ...

angulartypescriptrxjs

Is it necessary to separate Lodash orderby functions to ensure they function correctly?

For some reason, I'm having trouble sorting my data using lodash in my front-end client code. All the examples I've come across don't involve working with data in an interface, so I can't figure out where I'm going wrong. Let&apo ...

typescriptsortinglodash

Is there a way to automatically close a p-dropdown when a p-dialog is closed?

One issue I have encountered with my angular component, which includes ngprime p-dialog, is that the p-dropdown within the dialog does not close properly when the user accidentally clicks on closing the dialog. This results in the dropdown options remainin ...

angularprimengprimeng-dropdowns

Observable subscription results in a return of undefined

My observable is being filled with data from the backend using a service. The backend is providing the correct data, but I am having trouble building a pie chart with the values from the observable. The relevant part of the code is as follows: this.dataSe ...

angulartypescriptfrontendobservable

Creating objects in Angular 2 through HTTP GET calls

Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...

javascriptangulartypescript