CODEWITHSUNDEEP
javascripthtmlarraysangular
Wanderlust
Wanderlust

Reputation: 53

Display 2d array using ngFor in html

I have the following list of arrays which needs to be displayed in a p-table in html.

[Array(2), Array(2), Array(2), Array(2), Array(1)]
0: (2) ["abc", "def"]
1: (2) ["ghi", "jkl"]
2: (2) ["mno", "pqr"]
3: (2) ["stu", "vwx"]
4: ["yz"]

This needs to be displayed like below using html:

enter image description here

So how can I write a proper ngFor logic for this in html? Please help

Upvotes: 2

Views: 268

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

Demo with two ngFor you can do it

<table class="table">
  <tbody>
    <tr *ngFor="let el of array| max,let i=index">
      <td *ngFor="let arr of array">
        {{arr[i]}}
      </td>
    </tr>
  </tbody>
</table>

with pipe you can find max length item and take it base for loop

import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'max'
    })
    export class MaxPipe implements PipeTransform {
    
      transform(value: any[]): any {
        var maxlen = 0;
        for (let i=0; i<value.length; i++) {
          if (value[i].length>maxlen) {
            maxlen = value[i].length;
          }
        }
        return  new Array(maxlen); ;
      }
    
    }

Upvotes: 1

Related Questions