Angular Pipes for Formatting Output

Begin by importing the JhaPipesModule into your application.

// import into app.module
import { JhaPipesModule } from '@jkhy/responsive-ui-angular/jha-pipes';

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

export class AppModule(){}

jhaCurrency

Use the jhaCurrency pipe to format a monetary value with a dollar sign.

Pipe parameters:

• none

Example:

• {{ customerInfo.grossIncome | jhaCurrency }} might display $45,000.00.

jhaDate

Use the jhaDate pipe to format a date value in our standard MM/DD/YYYY format.

Pipe parameters:

• You can optionally pass a time zone identifier string to adjust the date for the user’s time zone. We are using Moment Timezone to parse the zone.
• View a full list of time zones

Example:

• {{ customerInfo.birthdate | jhaDate }} might display 04/01/1976.
• {{ customerInfo.birthdate | jhaDate : 'Australia/Sydney' }} might display 04/02/1976.

For input to this pipe, you can pass in either a JavaScript date or a string in one of the formats below.

jhaDateTime

Use the jhaDateTime pipe to format a date/time value in MM/DD/YYYY HH:mm format.

Pipe parameters:

• You can add seconds to the format by passing a value of true as the first pipe parameter. Seconds are not displayed by default.
• You can display the time value as 12-hour time (with AM/PM) by passing a value of true as the second pipe parameter. The time value displays as 24-hour time by default.
• You can pass a time zone identifier string as the third pipe parameter to adjust the date for the user’s time zone. We are using Moment Timezone to parse the zone.
• View a full list of time zones

Examples:

• {{ customerInfo.lastLogin | jhaDateTime }} might display 01/15/2016 14:18.
• {{ customerInfo.lastLogin | jhaDateTime : true }} might display 01/15/2016 14:18:07.
• {{ customerInfo.lastLogin | jhaDateTime : true : true }} might display 01/15/2016 2:18:07 PM.
• {{ customerInfo.lastLogin | jhaDateTime : true : true : 'America/New_York' }} might display 01/15/2016 3:18:07 PM EDT.

For input to this pipe, you can pass in either a JavaScript date or a string in one of the formats below. String values in formats other than these are displayed as-is.

jhaRate

Use the jhaRate pipe to format a rate value with a percent sign at the end.

Pipe parameters:

• Pass the number of digits to display after the decimal as the first pipe parameter.

Example:

• {{ customerInfo.interestRate| jhaRate : 3 }} might display 8.750%.
• Note that this filter does not multiply the backing value by 100; it expects the rate to be a percentage value.

jhaYesNo

Use the jhaYesNo pipe to format a boolean value as “Yes” or “No”.

Pipe parameters:

• none

Example:

• {{ customerInfo.activeCustomer| jhaYesNo }} might display Yes.