0.0.23 • Published 2 years ago

@softloans.io/ngx-loan-calculator v0.0.23

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

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

PropertiesDescriptionTypeDefault
loanMinMinimum value for loan rangenumber250
loanMaxMaximum value for loan rangenumber8000
loanFromDefault floor value for loannumber1900
loanToDefault ceiling value for loannumber4100
loanPurposeOptions'All', 'MarketingOnly' or 'InventoryOnly'LoanPurposeOptionLoanPurposeOption.All
loanPurposeDefault loan purpose; 'Marketing' or 'Inventory'LoanPurposeLoanPurpose.Marketing
showTitleShow titlebooleantrue
showLoanPurposeShow loan purposebooleantrue
showAgreementShow agreement checkboxbooleanfalse
showLoginShow login linkbooleanfalse
monthsMinMinimum value for loan period rangenumber2
monthsMaxMaximum value for loan period rangenumber12
monthsDefaultDefault value for loan period rangenumber9
titleTitle textstringApply for a loan here
showBorderShow borderbooleantrue
showRoundedShow rounded cornersbooleantrue
fontFamilyFont familystring-
textColorText colorstring-
mainColorMain colorstring-
backgroundColorBackground colorstring-
languageLanguage codestringen
submitEventEvent to execute on submitEventEmitter<{ loanFrom: number; loanTo: number; loanPurpose: LoanPurpose; months: number; }>-
loginEventEvent to execute on loginEventEmitter<{}>-
0.0.22

2 years ago

0.0.23

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.12

3 years ago

0.0.11-beta-1

3 years ago

0.0.10

3 years ago

0.0.0-watch

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago