@softloans.io/ngx-loan-calculator

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<{}>	-