Convert given array to an HTML table in angular

Using angular 15 I have below array

header:any =['id','cid','NAME,'code','unit']
data: any = [
['2','110005001','abc test','0','NA'],
['2','110005001','abc test','0','NA'],
['2','110005001','abc test','0','NA']


I want to convert this to an html table data I tried below html code but its not working => {
        viewValue: lec,
        value: lec,
 <tr *ngFor="let r of Data">
 <td  >{{ r.value }}</td>

This gives output of one td taking all data with commas. How to get the values correctly to an html table


  • Your data is a nested array. You need the nested *ngFor to iterate each value in the array.

    <tr *ngFor="let r of data">
      <ng-container *ngFor="let value of r">
        <td>{{ value }}</td>

    If you look for a solution converting the values array into a set of objects:

    this.actualTableData = => {
      let obj: { [key: string]: string } = {};
      for (let i = 0; i < this.header.length; i++) {
        obj[this.header[i]] = x[i];
      return obj;
    <tr *ngFor="let r of actualTableData">
      <ng-container *ngFor="let h of header">
        <td>{{ r[h] }}</td>

    Demo @ StackBlitz