In angular data is not showing in a table

Question

hi am developing a rent calculator app in angular which take three inputs: rent, amount of rent increase per year; and number of years to calculate rent for. and give the result which is working fine. but i am having trouble to show that data in table as am new to angular i dont know the way to do that.

Html file

<div class="container">
<h1>Rent Calculator</h1>

<input type="number" 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)]="years">

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

<table id="users">
    <tr>
        <th *ngFor="let column of headers">
            {{column}}
        </th>
    </tr>
    <tr *ngFor="let row of total">
        <td *ngFor="let column of headers">
            {{row[column]}}
        </td>
    </tr>
</table>

 <!-- <h4 *ngFor="let r of total;let i=index">
        Year {{i+1}}&nbsp; &nbsp;=&nbsp;&nbsp;{{r}}&nbsp;Rs
    </h4> -->
//it works with above commented code
</div>

ts file

  export class TableComponent implements OnInit {
    headers: any = ['years', 'baseRent', 'New_rent'];

  ngOnInit(): void {

  }

  constructor() { }

  increase: any;

  years: any;

  rent: any;

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

  calculate() {
    // debugger;
    this.total = [];

    let previousRent = this.rent;

    this.total.push(previousRent);

    for (let i = 1; i < this.years; i++) {

      const CurrentRent = previousRent * (1 + this.increase / 100);

      previousRent = CurrentRent;

      this.total.push(Math.round((CurrentRent + Number.EPSILON) * 100) / 100);

    }
  }
}

Answer 1

The first thing you need to learn is to avoid using any as your type. Angular uses TypeScript so we can leverage the type system.

I created 2 types: RentHeader and RentResult to represent the real world objects we need.

RentHeader will have a text for displaying on the table, and the key where we will use it to get the correct property from the RentResult .

RentResult have 3 properties which represent all the values you need: years , baseRent and newRent .

We use _rentResults array to store the object in the calculation function.

example.component.ts

//... import stuff here.

type RentHeader = {
  readonly text: string;
  readonly key: string;
};

type RentResult = {
  readonly years: number;
  readonly baseRent: number;
  readonly newRent: number;
};

@Component({
 ...
})
export class ExampleComponent implements Oninit {

  private _rentResults!: RentResult[];

  public get rentResults() {
    return this._rentResults;
  }

  public readonly headers: RentHeader[] = [
    {text: 'Years', key: 'years'},
    {text: 'Base Rent', key: 'baseRent'},
    {text: 'New Rent', key: 'newRent'}
  ];

  ...
   
  public calculate() {

    // do your calculation here and replace the 0 with your calculation.

    const result = {
      years: 0,
      baseRent: 0,
      newRent: 0
    };

    this._rentResults.push(result);
  }  
}

example.component.html

...

<table>
    <tr>
        <th *ngFor="let header of headers">
            {{header.text}}
        </th>
    </tr>

    <tr *ngFor="let row of rentResults">
        <td *ngFor="let header of headers">
            {{row[header.key]}}
        </td>
    </tr>
</table>

...