ngx-loan-calculator

The ngx-loan-calculator component is targeted for integrations into the Angular applications developed by the Softloans integration partners.

Dependencies

• Angular 13+

• rxjs 6+

• @angular-slider/ngx-slider 2

  npm i @angular-slider/ngx-slider

Installation

To add the ngx-loan-calculator component to your Angular project:

npm i "@softloans.io/ngx-loan-calculator"

Once installed, add the NgxLoanCalculatorModule module to your app.module.ts:

import { NgxLoanCalculatorModule } from '@softloans.io/ngx-loan-calculator';

...
@NgModule({
 ...
 imports: [... NgxLoanCalculatorModule, ...],
 ...
})
export class AppModule {}

Sample Usage

Now you can use the ngx-loan-calculator component in your app components, for example in app.component.html:

<lib-ngx-loan-calculator [loanMin]="200" [loanMax]="9000" [loanFrom]="2000" [loanTo]="4000" [loanPurpose]="loanPurposeInventory" [loanPurposeOptions]="loanPurposeOptionsAll" [monthsMin]="2" [monthsMax]="12" [monthsDefault]="6" (submitEvent)="submitLoanCalculator($event)"></lib-ngx-loan-calculator>

where app.component.ts contains:

import { Component } from "@angular/core";
import { LoanPurpose, LoanPurposeOptions } from "@softloans.io/ngx-loan-calculator";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  loanPurposeInventory = LoanPurpose.Inventory;
  loanPurposeOptionsAll = LoanPurposeOptions.All;

  submitLoanCalculator(loan: { loanFrom: number; loanTo: number; loanPurpose: LoanPurpose; months: number }) {
    console.log(loan);
  }
}

Options

| Properties | Description | Type | Default | | ------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | --------------------- | | loanMin | Minimum value for loan range | number | 250 | | loanMax | Maximum value for loan range | number | 8000 | | loanFrom | Default floor value for loan | number | 1900 | | loanTo | Default ceiling value for loan | number | 4100 | | loanPurposeOptions | 'All', 'MarketingOnly' or 'InventoryOnly' | LoanPurposeOption | LoanPurposeOption.All | | loanPurpose | Default loan purpose; 'Marketing' or 'Inventory' | LoanPurpose | LoanPurpose.Marketing | | showTitle | Show title | boolean | true | | showLoanPurpose | Show loan purpose | boolean | true | | showAgreement | Show agreement checkbox | boolean | false | | showLogin | Show login link | boolean | false | | monthsMin | Minimum value for loan period range | number | 2 | | monthsMax | Maximum value for loan period range | number | 12 | | monthsDefault | Default value for loan period range | number | 9 | | title | Title text | string | Apply for a loan here | | showBorder | Show border | boolean | true | | showRounded | Show rounded corners | boolean | true | | fontFamily | Font family | string | - | | textColor | Text color | string | - | | mainColor | Main color | string | - | | backgroundColor | Background color | string | - | | language | Language code | string | en | | submitEvent | Event to execute on submit | EventEmitter<{ loanFrom: number; loanTo: number; loanPurpose: LoanPurpose; months: number; }> | - | | loginEvent | Event to execute on login | EventEmitter<{}> | - |