If you're adding PrimeNG to your solution for the first time, reference their
setup documentation.
It's important to note that the inclusion of the nova-light theme css is not necessary
to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.
Implementation
Begin by importing the InputNumberModule module into your application.
Add a PrimeNG p-inputNumber component with mode="decimal" locale="en-US" to specify a currency input. Also bind minFractionDigits and maxFractionDigits to 2 and step to 0.01. Add rui-form-control as the inputStyleClass to inherit the correct styling.
Add <span class="input-group-addon">$</span> before the p-inputNumber element to display a dollar sign before the input. Nest both this span and the p-inputNumber within a div that has the input-group CSS class.
The PrimeNG InputNumber component also includes a currency mode that displays a dollar sign within the input. This does work, however there is a bug when a user clicks into the input (after the value) and uses the backspace key to clear out the current entry. If the user then tries to type an amount with cents such as 1.99, the result is $1,990.00. Using the decimal mode with the dollar sign in an input group addon works as expected in this scenario and is the preferred method.
Angular component development
Component reference
p-inputNumber
p-inputNumber
Module: InputNumberModule
-
Package: primeng
Allows user to edit values that have a currency format
If you're adding PrimeNG to your solution for the first time, reference their
setup documentation.
It's important to note that the inclusion of the nova-light theme css is not necessary
to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.
Implementation
Begin by importing the InputNumberModule module into your application.
Add a PrimeNG p-inputNumber component with mode="decimal" locale="en-US" to specify a currency input. Also bind minFractionDigits and maxFractionDigits to 2 and step to 0.01. Add rui-form-control as the inputStyleClass to inherit the correct styling.
Add <span class="input-group-addon">$</span> before the p-inputNumber element to display a dollar sign before the input. Nest both this span and the p-inputNumber within a div that has the input-group CSS class.
The PrimeNG InputNumber component also includes a currency mode that displays a dollar sign within the input. This does work, however there is a bug when a user clicks into the input (after the value) and uses the backspace key to clear out the current entry. If the user then tries to type an amount with cents such as 1.99, the result is $1,990.00. Using the decimal mode with the dollar sign in an input group addon works as expected in this scenario and is the preferred method.
Design
Figma design
Figma design info
You can find this component in the Components - Forms page in the Figma UI Kit.
Dev Component
Design Component Name
Currency input
RUI / Forms / Currency Input
Adobe XD design
Adobe XD design info
You can find this component in these artboards in the Adobe XD design samples:
Sample App - Editing Form Data
Dev Component
Design Component Name
Currency input
JHA / Forms / Currency Input
Support options
Have questions on this topic?
Join the
Responsive UI team in Microsoft Teams to connect with the community.
