I am building a rent calculator app which have 3 fields total rent,rent incresese per year and number of years to calculate rent for in which input field automatically updates with last value in array after click i dont want it to update on click

Html file

Rent Calculator

<input type="number" name="rent" placeholder="Enter your total rent" [(ngModel)]="rent" />
<input type="number" placeholder="Rent increase per Year" [(ngModel)]="increase">
<input type="number" placeholder="Number of Total Years" [(ngModel)]="months">

<button type="button" (click)="calculate()"> Calculate </button>
<br>

<h4 *ngFor="let r of total;let i=index">
    Year {{i+1}}&nbsp; &nbsp;=&nbsp;&nbsp;{{r}}&nbsp;Rs
</h4>

ts file...

export class RentCalculatorComponent {

  constructor() { }

  increase!: number;

  months!: number;

  rent!: number;

  total: any[] = [];//declare an array

  calculate() {

    for (let i = 0; i <= this.months - 1; i++) {
      this.rent = this.rent + this.rent * this.increase / 100;
      this.total[i] = this.rent; //here store in the array the result
      this.total[i] = this.total[i].toFixed(2);
      console.log(this.total[i]);
    }

  }
}