@softloans.io/ngx-loan-calculator v0.0.23
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<{}> | - |
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago