Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Angular Directives for Formatting Input

Technical Info > Framework Considerations: Angular > Angular Directives for Formatting Input

Begin by importing the JhaResponsiveCoreModule into your application.

Import the JhaResponsiveCoreModule module
// import into app.module
import { JhaResponsiveCoreModule } from '@jkhy/responsive-ui-angular/jha-responsive-core';

@NgModule({
    imports: [
        ...
        JhaResponsiveCoreModule.forRoot(),
        ...
    ]
})

export class AppModule(){}

jhaCurrencyInput

Add the jhaCurrencyInput directive to inputs that prompt for currency. This directive formats the input’s value as currency after the user exits the field. Non-currency characters are removed from the value and the decimal portion is padded to 2 places.

Using the jhaCurrencyInput directive
<input id="GrossIncome" name="GrossIncome" type="number" step="0.01" jhaCurrencyInput
    class="form-control" [(ngModel)]="customerInfo.grossIncome" autocomplete="off"
    autocorrect="off" autocapitalize="off" spellcheck="false" />

jhaDecimalInput

Add the jhaDecimalInput attribute directive to inputs that prompt for numeric values, where you need a specific number of decimal places shown after the decimal point; use the jhaDecimalPlaces attribute to specify the number of decimal places. The value is formatted after the user exits the field.

Using the jhaDecimalInput directive
<input id="InterestRate" name="InterestRate" type="number"
    jhaDecimalInput jhaDecimalPlaces="3" class="form-control"
    [(ngModel)]="customerInfo.interestRate" autocomplete="off"
    autocorrect="off" autocapitalize="off" spellcheck="false" />

jhaZeroPaddedNumber

Add the jhaZeroPaddedNumber attribute directive to inputs that prompt for numeric values, where the value must be padded with zeros to a specified length; use the jhaLength attribute to specify the total number of digits that must be present. The value is formatted after the user exits the field.

Using the jhaZeroPaddedNumber directive
<input id="SSN" name="SSN" type="number" jhaZeroPaddedNumber jhaLength="9" class="form-control"
    [(ngModel)]="customerInfo.ssn" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.
Last updated Tue Jun 6 2023