Here is the HTML code from my app.component.html file:
<button mat-raised-button color="primary"
mat-button class="nextButton"
(click)="calculatePremium()">
Calculate
</button>
<div id="calculatedData">
</div>
The button above triggers a calculation using an API call. While I am able to get the expected output, the dynamic value generated after clicking the button does not display inside the specified div as intended. Instead, it shows up as undefined in the browser.
Below is a snippet of my app.component.ts file showcasing the calculation process:
calculatePremium(){
console.log("calculating");
let frmData: any = this.form.value;
this.dobVal = frmData.contact.dob;
let onlyYear = String(this.dobVal).split(' ')[3];
// AGE
let age = (Number(new Date().getFullYear()) - Number(onlyYear));
// NAME
let name = frmData.contact.firstName;
// GENDER
let gender = frmData.contact.gender;
// smoking
let smoker = frmData.basicInfo.isSmoker;
// no of dependents
let dependentsCount = Number(frmData.basicInfo.adults) + Number(frmData.basicInfo.children);
let finalObj = {
'name': name,
'age': age,
'gender': gender,
'smoking': smoker,
'dependent': dependentsCount
}
this.calcualte.calculatePremium(finalObj).subscribe(
(data: any) => {
//success
console.log(data);
Swal.fire('Plan Amount', 'is ' + data.name + data.amount, 'success');
this.amount = data.amount;
console.log(this.amount);
//alert('success');
},
(error) => {
//error
console.log(error);
});
console.log(this.amount);
const x = document.getElementById('calculatedData');
This is where the dynamic value should be displayed, but currently appears as undefined on the browser:
x.innerHTML = `<div class="appendme">${this.amount}</div>`;
const len = x.getElementsByTagName('div').length;
console.log(len);
}}