this is my html file, i.e. app.component.html

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


<div id="calculatedData">
                                    
</div>

the above button is used to calculate the data by calling an api, and I'm getting the expected output, but when this button is clicked I want to show that generate value inside the div mentioned above, but that dynamic value is not showing in the browser, and the value is shown as undefined.

and this is my app.component.ts file

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);  
  }}