<aura:component implements="flexipage:availableForAllPageTypes"
|
access="global">
|
|
<aura:attribute name="recordId" type="Id" />
|
<aura:attribute name="property" type="Property__c" />
|
|
<force:recordData recordId="{!v.recordId}"
|
targetFields="{!v.property}"
|
layoutType="FULL"
|
recordUpdated="{!c.recordUpdated}"/>
|
|
<aura:attribute name="principal" type="Integer" default="200000"/>
|
<aura:attribute name="years" type="Integer" default="30"/>
|
<aura:attribute name="rate" type="Integer" default="5"/>
|
<aura:attribute name="monthlyPayment" type="Decimal"/>
|
|
<aura:registerEvent name="change" type="c:MortgageChange"/>
|
|
<aura:handler name="change" value="{!v.principal}" action="{!c.calculateMonthlyPayment}"/>
|
<aura:handler name="change" value="{!v.years}" action="{!c.calculateMonthlyPayment}"/>
|
<aura:handler name="change" value="{!v.rate}" action="{!c.calculateMonthlyPayment}"/>
|
<aura:handler name="init" value="{!this}" action="{!c.calculateMonthlyPayment}" />
|
|
<div>
|
<div class="input">
|
<lightning:input aura:id="principal" type="number" label="Principal:" value="{!v.principal}"/>
|
<lightning:select name="select1" label="Years:" value="{!v.years}">
|
<option value="20">20</option>
|
<option value="25">25</option>
|
<option value="30">30</option>
|
<option value="35">35</option>
|
</lightning:select>
|
<lightning:input aura:id="rate" type="text" label="Rate:" value="{!v.rate}"/>
|
</div>
|
<div class="result">
|
Monthly Payment:
|
<lightning:formattedNumber value="{!v.monthlyPayment}" style="currency" currencyCode="USD"/>
|
</div>
|
</div>
|
|
</aura:component>
|
