{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "loan-calculator", "title": "Loan Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/loan-calculator/loan-calculator.component.ts", "content": "// Interactive mortgage and commercial loan amortization schedule calculator with dynamic\n// sliders, loan type presets, extra payment impact simulation, principal vs interest visual\n// ratio bar, and year-by-year amortization breakdown table. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Building2,\n Calculator,\n Calendar,\n Car,\n CheckCircle2,\n DollarSign,\n FileSpreadsheet,\n Home,\n LucideAngularModule,\n PiggyBank,\n Wallet,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\n\nexport type LoanType = 'mortgage-30' | 'commercial-10' | 'auto-5' | 'personal-3'\n\nexport interface LoanPreset {\n id: LoanType\n name: string\n amount: number\n rate: number\n termYears: number\n extraPayment: number\n description: string\n}\n\nexport const LOAN_PRESETS: Record = {\n 'mortgage-30': {\n id: 'mortgage-30',\n name: 'Mortgage 30Y',\n amount: 450_000,\n rate: 6.5,\n termYears: 30,\n extraPayment: 200,\n description: '30-year fixed home mortgage',\n },\n 'commercial-10': {\n id: 'commercial-10',\n name: 'Commercial 10Y',\n amount: 1_200_000,\n rate: 7.25,\n termYears: 10,\n extraPayment: 500,\n description: '10-year commercial real estate loan',\n },\n 'auto-5': {\n id: 'auto-5',\n name: 'Auto Loan 5Y',\n amount: 45_000,\n rate: 5.9,\n termYears: 5,\n extraPayment: 50,\n description: '60-month standard vehicle loan',\n },\n 'personal-3': {\n id: 'personal-3',\n name: 'Personal Loan',\n amount: 25_000,\n rate: 9.5,\n termYears: 3,\n extraPayment: 25,\n description: '36-month fixed unsecured personal loan',\n },\n}\n\nexport const LOAN_AMOUNT_MARKS: Record = {\n 100000: '$100K',\n 500000: '$500K',\n 1000000: '$1M',\n 2000000: '$2M',\n}\n\nexport const INTEREST_RATE_MARKS: Record = {\n 1: '1%',\n 5: '5%',\n 10: '10%',\n 15: '15%',\n}\n\nexport const LOAN_TERM_MARKS: Record = {\n 5: '5Y',\n 10: '10Y',\n 15: '15Y',\n 20: '20Y',\n 30: '30Y',\n}\n\nexport const EXTRA_PAYMENT_MARKS: Record = {\n 0: '$0',\n 500: '$500',\n 1000: '$1K',\n 2000: '$2K',\n}\n\nexport const TERM_PRESETS = [5, 10, 15, 20, 30]\n\nexport interface MonthRecord {\n month: number\n principalPaid: number\n interestPaid: number\n extraPaid: number\n totalPaid: number\n remainingBalance: number\n}\n\nexport interface YearRecord {\n year: number\n principalPaid: number\n interestPaid: number\n extraPaid: number\n totalPaid: number\n remainingBalance: number\n}\n\nexport function fmtCurrency(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val || 0)\n}\n\nexport function fmtCurrencyWhole(val: number): string {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(val || 0)\n}\n\nexport function baseMonthlyPaymentFor(principal: number, annualRate: number, termYears: number): number {\n const totalMonths = termYears * 12\n if (principal <= 0 || totalMonths <= 0) return 0\n if (annualRate <= 0) return principal / totalMonths\n const monthlyRate = annualRate / 100 / 12\n const factor = Math.pow(1 + monthlyRate, totalMonths)\n if (!isFinite(factor) || factor <= 1) return principal / totalMonths\n return (principal * (monthlyRate * factor)) / (factor - 1)\n}\n\nexport interface AmortizationResult {\n monthlySchedule: MonthRecord[]\n yearlySchedule: YearRecord[]\n actualMonths: number\n actualYears: string\n monthsSaved: number\n yearsSaved: string\n totalInterestPaid: number\n totalLoanCost: number\n totalExtraPaid: number\n interestSavings: number\n}\n\nexport function amortize(\n loanAmount: number,\n interestRate: number,\n loanTermYears: number,\n extraMonthlyPayment: number,\n basePayment: number,\n totalInterestBase: number,\n): AmortizationResult {\n const principal = Math.max(0, loanAmount)\n const annualRate = Math.max(0, interestRate)\n const termYears = Math.max(1, loanTermYears)\n const extra = Math.max(0, extraMonthlyPayment)\n const monthlyRate = annualRate / 100 / 12\n const standardMonths = termYears * 12\n\n let balance = principal\n const monthlySchedule: MonthRecord[] = []\n let totalInterest = 0\n let totalPaid = 0\n let totalExtra = 0\n let month = 0\n const maxMonths = 1200\n\n while (balance > 0.005 && month < maxMonths) {\n month++\n const interestForMonth = annualRate > 0 ? balance * monthlyRate : 0\n let scheduledTotal = basePayment + extra\n if (balance + interestForMonth < scheduledTotal) scheduledTotal = balance + interestForMonth\n const principalForMonth = Math.min(balance, Math.max(0, scheduledTotal - interestForMonth))\n const extraForMonth = Math.max(0, scheduledTotal - basePayment)\n balance = Math.max(0, balance - principalForMonth)\n totalInterest += interestForMonth\n totalPaid += scheduledTotal\n totalExtra += extraForMonth\n monthlySchedule.push({\n month,\n principalPaid: principalForMonth,\n interestPaid: interestForMonth,\n extraPaid: extraForMonth,\n totalPaid: scheduledTotal,\n remainingBalance: balance,\n })\n }\n\n const yearlySchedule: YearRecord[] = []\n const totalYearsActual = Math.ceil(monthlySchedule.length / 12)\n for (let y = 1; y <= totalYearsActual; y++) {\n const yearMonths = monthlySchedule.slice((y - 1) * 12, Math.min(y * 12, monthlySchedule.length))\n if (yearMonths.length === 0) continue\n yearlySchedule.push({\n year: y,\n principalPaid: yearMonths.reduce((s, m) => s + m.principalPaid, 0),\n interestPaid: yearMonths.reduce((s, m) => s + m.interestPaid, 0),\n extraPaid: yearMonths.reduce((s, m) => s + m.extraPaid, 0),\n totalPaid: yearMonths.reduce((s, m) => s + m.totalPaid, 0),\n remainingBalance: yearMonths[yearMonths.length - 1]?.remainingBalance ?? 0,\n })\n }\n\n const monthsSaved = Math.max(0, standardMonths - monthlySchedule.length)\n return {\n monthlySchedule,\n yearlySchedule,\n actualMonths: monthlySchedule.length,\n actualYears: (monthlySchedule.length / 12).toFixed(1),\n monthsSaved,\n yearsSaved: (monthsSaved / 12).toFixed(1),\n totalInterestPaid: totalInterest,\n totalLoanCost: totalPaid,\n totalExtraPaid: totalExtra,\n interestSavings: Math.max(0, totalInterestBase - totalInterest),\n }\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-loan-calculator, [ui-loan-calculator]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n
\n \n \n Loan Amortization Engine\n \n
\n

\n Loan & Mortgage Amortization Calculator\n

\n

\n Estimate monthly payments, interest vs principal breakdown, and payoff timelines with extra payments.\n

\n
\n\n
\n \n \n \n \n \n \n \n \n
\n
\n\n \n
\n
\n
\n
\n

\n \n Loan Parameters\n

\n

\n Customize loan principal, interest rate, term duration, and extra monthly contributions.\n

\n
\n
\n
\n
\n
\n Loan Amount (Principal)\n

Total borrowed loan amount.

\n
\n
\n \n
\n
\n
\n \n
\n
\n Quick select:\n @for (amt of [150000, 300000, 450000, 750000, 1200000]; track amt) {\n \n {{ amt >= 1000000 ? (amt / 1000000).toFixed(1) + 'M' : amt / 1000 + 'K' }}\n \n }\n
\n
\n\n
\n\n
\n
\n
\n Annual Interest Rate (APR)\n

Fixed annual percentage rate.

\n
\n
\n \n
\n
\n
\n \n
\n
\n Market benchmarks:\n @for (rate of [4.5, 5.5, 6.5, 7.5, 9.5]; track rate) {\n \n {{ rate }}%\n \n }\n
\n
\n\n
\n\n
\n
\n
\n Loan Term\n

Amortization period in years.

\n
\n
\n \n {{ loanTermYears() }} Years ({{ loanTermYears() * 12 }} mo)\n \n
\n
\n
\n \n
\n
\n Standard terms:\n @for (term of termPresets; track term) {\n \n {{ term }} Yrs\n \n }\n
\n
\n\n
\n\n
\n
\n
\n
\n Extra Monthly Payment\n \n Accelerates Payoff\n \n
\n

Directly reduces principal balance each month.

\n
\n
\n \n
\n
\n
\n \n
\n
\n Quick extra:\n @for (extra of [0, 100, 200, 500, 1000]; track extra) {\n \n +${{ extra }}/mo\n \n }\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n \n Estimated Monthly Payment\n \n \n Amortized\n \n
\n
\n
\n \n {{ fmt(baseMonthlyPayment()) }}\n \n / month\n
\n @if (extraMonthlyPayment() > 0) {\n

\n Total monthly cash outlay:\n \n {{ fmt(baseMonthlyPayment() + extraMonthlyPayment()) }}/mo\n \n ({{ fmt(baseMonthlyPayment()) }} base + {{ fmt(extraMonthlyPayment()) }} extra)\n

\n } @else {\n

\n Standard fixed payment based on {{ interestRate() }}% APR over {{ loanTermYears() }} years.\n

\n }\n
\n
\n\n
\n
\n\n @if (extraMonthlyPayment() > 0 && amortization().interestSavings > 0) {\n
\n
\n \n
\n

\n Saves {{ fmtWhole(amortization().interestSavings) }} and cuts\n {{ amortization().yearsSaved }} years off payoff!\n

\n

\n You'll be debt-free in {{ amortization().actualYears }} years ({{\n amortization().actualMonths\n }}\n payments) instead of {{ loanTermYears() }} years.\n

\n
\n
\n
\n }\n\n
\n
\n Total Loan Principal\n {{ fmt(loanAmount()) }}\n
\n
\n Total Interest Paid\n {{ fmt(amortization().totalInterestPaid) }}\n
\n
\n Total Loan Cost\n {{\n fmt(amortization().totalLoanCost)\n }}\n
\n
\n Effective Payoff Timeline\n \n {{ amortization().actualYears }} Years ({{ amortization().actualMonths }} mo)\n \n
\n
\n\n
\n\n
\n
\n Principal vs. Total Interest\n {{ principalPercent() }}% / {{ interestPercent() }}%\n
\n
\n
\n
\n
\n \n
\n \n Principal: {{ fmtWhole(loanAmount()) }} ({{ principalPercent() }}%)\n
\n
\n \n Interest: {{ fmtWhole(amortization().totalInterestPaid) }} ({{ interestPercent() }}%)\n
\n
\n
\n\n
\n\n
    \n
  • \n \n Real-time compound interest calculations\n
    • \n
  • \n \n Principal reduction extra payment model\n
    • \n
  • \n \n Standard fixed-rate banking amortization schedule\n
    • \n
\n
\n\n
\n \n \n
\n
\n \n \n\n \n
\n
\n
\n

\n \n Amortization Schedule\n

\n

\n Annual breakdown of principal reduction, interest paid, extra contributions, and ending balance.\n

\n
\n
\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (row of displayedSchedule(); track row.year) {\n \n \n \n \n \n \n \n \n }\n \n \n \n \n \n \n \n \n \n \n \n
YearPrincipal PaidInterest PaidExtra PrincipalTotal PaymentEnding Balance
\n
\n Year {{ row.year }}\n @if (row.year === 1) {\n Initial\n }\n
\n 		\n {{ fmt(row.principalPaid) }}\n {{ fmt(row.interestPaid) }}\n {{ row.extraPaid > 0 ? '+' + fmt(row.extraPaid) : '—' }}\n {{ fmt(row.totalPaid) }}\n {{ fmt(row.remainingBalance) }}\n
\n Total ({{ displayedSchedule().length }} {{ displayedSchedule().length === 1 ? 'Year' : 'Years' }})\n \n {{ fmt(displayedTotals().principal) }}\n \n {{ fmt(displayedTotals().interest) }}\n \n {{ fmt(displayedTotals().extra) }}\n {{ fmt(displayedTotals().total) }}\n {{ fmt(displayedSchedule()[displayedSchedule().length - 1]?.remainingBalance ?? 0) }}\n
\n
\n
\n
\n \n `,\n})\nexport class UiLoanCalculatorComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Building2 = Building2\n protected readonly Calculator = Calculator\n protected readonly Calendar = Calendar\n protected readonly Car = Car\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly DollarSign = DollarSign\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly Home = Home\n protected readonly PiggyBank = PiggyBank\n protected readonly Wallet = Wallet\n\n protected readonly amountMarks = LOAN_AMOUNT_MARKS\n protected readonly rateMarks = INTEREST_RATE_MARKS\n protected readonly termMarks = LOAN_TERM_MARKS\n protected readonly extraMarks = EXTRA_PAYMENT_MARKS\n protected readonly termPresets = TERM_PRESETS\n\n @Input('class') className?: string\n\n readonly selectedLoanType = signal('mortgage-30')\n readonly loanAmount = signal(450_000)\n readonly interestRate = signal(6.5)\n readonly loanTermYears = signal(30)\n readonly extraMonthlyPayment = signal(200)\n readonly showAllYears = signal(false)\n\n readonly baseMonthlyPayment = computed(() =>\n baseMonthlyPaymentFor(this.loanAmount(), this.interestRate(), this.loanTermYears()),\n )\n readonly totalCostBase = computed(() => this.baseMonthlyPayment() * this.loanTermYears() * 12)\n readonly totalInterestBase = computed(() => Math.max(0, this.totalCostBase() - this.loanAmount()))\n\n readonly amortization = computed(() =>\n amortize(\n this.loanAmount(),\n this.interestRate(),\n this.loanTermYears(),\n this.extraMonthlyPayment(),\n this.baseMonthlyPayment(),\n this.totalInterestBase(),\n ),\n )\n\n readonly principalPercent = computed(() => {\n const total = this.amortization().totalLoanCost\n if (total <= 0) return 100\n return Math.min(100, Math.max(0, Math.round((this.loanAmount() / total) * 100)))\n })\n readonly interestPercent = computed(() => Math.max(0, 100 - this.principalPercent()))\n\n readonly displayedSchedule = computed(() =>\n this.showAllYears() ? this.amortization().yearlySchedule : this.amortization().yearlySchedule.slice(0, 5),\n )\n readonly displayedTotals = computed(() => {\n const list = this.displayedSchedule()\n return {\n principal: list.reduce((s, r) => s + r.principalPaid, 0),\n interest: list.reduce((s, r) => s + r.interestPaid, 0),\n extra: list.reduce((s, r) => s + r.extraPaid, 0),\n total: list.reduce((s, r) => s + r.totalPaid, 0),\n }\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-10 p-4 sm:p-6 lg:p-8', this.className)\n }\n\n fmt(v: number): string {\n return fmtCurrency(v)\n }\n\n fmtWhole(v: number): string {\n return fmtCurrencyWhole(v)\n }\n\n handleTabChange(value: string): void {\n const type = value as LoanType\n this.selectedLoanType.set(type)\n const preset = LOAN_PRESETS[type]\n if (preset) {\n this.loanAmount.set(preset.amount)\n this.interestRate.set(preset.rate)\n this.loanTermYears.set(preset.termYears)\n this.extraMonthlyPayment.set(preset.extraPayment)\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/loan-calculator/loan-calculator.component.ts" }, { "path": "packages/registry-angular/blocks/loan-calculator/index.ts", "content": "export {\n UiLoanCalculatorComponent,\n LOAN_PRESETS,\n LOAN_AMOUNT_MARKS,\n INTEREST_RATE_MARKS,\n LOAN_TERM_MARKS,\n EXTRA_PAYMENT_MARKS,\n TERM_PRESETS,\n fmtCurrency,\n fmtCurrencyWhole,\n baseMonthlyPaymentFor,\n amortize,\n type LoanType,\n type LoanPreset,\n type MonthRecord,\n type YearRecord,\n type AmortizationResult,\n} from './loan-calculator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/loan-calculator/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/slider.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "Interactive mortgage and commercial loan amortization schedule calculator with dynamic sliders, loan type presets, extra payment impact simulation, principal vs interest visual ratio bar, and year-by-year amortization breakdown table.", "categories": [ "finance", "billing" ] }