How to calculate total amount with discount, service charge and other Taxes
<div style="width:120px; margin:auto; text-align:center">
<form>
<label>Amount</label>
<input type="number" [(ngModel)]="amt" name="amt"
placeholder="Total" (ngModelChange)="updateValues()" />
<br /><br />
<label>Discount %</label>
<input type="number" [(ngModel)]="discount" name="discount"
placeholder="Discount %" (ngModelChange)="updateValues()" />
<br /><br />
<label>Total Amount</label>
<input type="number" [(ngModel)]="totalamount" name="totalamount"
placeholder="Total Amount" readonly />
<br /><br />
<label>Service</label>
<input type="number" [(ngModel)]="servCharge" name="servCharge"
placeholder="5%" readonly />
<br /><br />
<label>Tax</label>
<input type="number" [(ngModel)]="TSCharge" name="TSCharge"
placeholder="5%" readonly />
<br />
<h3>Total : {{ getTotal() }}</h3>
</form>
</div>
TS
-----
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
amt: number;
servCharge: number;
TSCharge: number;
discount: number;
totalamount: number;
updateValues() {
this.totalamount = this.amt - this.amt * (this.discount / 100);
this.servCharge = this.totalamount * 0.05; // Assuming service charge is 5%
this.TSCharge = this.totalamount * 0.05; // Assuming tax is 5%
}
getTotal() {
// Check if any of the values are not valid numbers
if ( isNaN(this.totalamount) || isNaN(this.servCharge) || isNaN(this.TSCharge) ) {
return 0; // Return 0 if any of the values are not valid numbers
} else {
return this.totalamount + this.servCharge + this.TSCharge; // Perform the addition if all values are valid numbers
}
}
}
OUT PUT
-------------
