You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.6 KiB
88 lines
2.6 KiB
<div class="container p-0">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<form class="mb-4" [formGroup]="calculatorForm">
|
|
<!--<mat-form-field appearance="outline">
|
|
<input formControlName="principalInvestmentAmount" matInput />
|
|
</mat-form-field>-->
|
|
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Savings Rate per Month</mat-label>
|
|
<input
|
|
formControlName="paymentPerPeriod"
|
|
matInput
|
|
step="100"
|
|
type="number"
|
|
/>
|
|
<span class="ml-2" matTextSuffix>{{ currency }}</span>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Annual Interest Rate</mat-label>
|
|
<input
|
|
formControlName="annualInterestRate"
|
|
matInput
|
|
step="0.25"
|
|
type="number"
|
|
/>
|
|
<div class="ml-2" matTextSuffix>%</div>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Retirement Date</mat-label>
|
|
<div>
|
|
{{ calculatorForm.get('retirementDate').value | date: 'MMMM YYYY' }}
|
|
</div>
|
|
<input
|
|
class="d-none"
|
|
formControlName="retirementDate"
|
|
matInput
|
|
[matDatepicker]="datepicker"
|
|
/>
|
|
<mat-datepicker-toggle
|
|
matIconSuffix
|
|
[disabled]="hasPermissionToUpdateUserSettings !== true"
|
|
[for]="datepicker"
|
|
/>
|
|
<mat-datepicker
|
|
#datepicker
|
|
startView="multi-year"
|
|
[disabled]="hasPermissionToUpdateUserSettings !== true"
|
|
(monthSelected)="setMonthAndYear($event, datepicker)"
|
|
>
|
|
</mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-label i18n>Projected Total Amount</mat-label>
|
|
<input
|
|
formControlName="projectedTotalAmount"
|
|
matInput
|
|
step="100"
|
|
type="number"
|
|
/>
|
|
<span class="ml-2" matTextSuffix>{{ currency }}</span>
|
|
</mat-form-field>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-9 text-center">
|
|
<div class="chart-container mb-4">
|
|
@if (isLoading) {
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height: '100%',
|
|
width: '100%'
|
|
}"
|
|
/>
|
|
}
|
|
<canvas
|
|
#chartCanvas
|
|
class="h-100"
|
|
[ngStyle]="{ display: isLoading ? 'none' : 'block' }"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|