este es mi archivo html, es decir, app.component.html

 <button mat-raised-button color="primary" mat-button class="nextButton" (click)="calculatePremium()"> Calculate </button> <div id="calculatedData"> </div>

el botón anterior se usa para calcular los datos llamando a una API, y obtengo el resultado esperado, pero cuando se hace clic en este botón, quiero mostrar ese valor generado dentro del div mencionado anteriormente, pero ese valor dinámico no se muestra en el navegador, y el valor se muestra como indefinido.

y este es mi archivo app.component.ts

 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 I want to show the dynamic value, but the amount is shown as undefined when rendered on the browser.

 x.innerHTML = `<div class="appendme">${this.amount}</div>`; const len = x.getElementsByTagName('div').length; console.log(len); }}