How to create data gridview conditionally in runtime in angular?

Question

I want to represent ODF(Optical Distribution Frame) as gridView in angular let's say we have 24 ports ODF

export class TestComponent implements OnInit {
  constructor(private bbService: BackboneService) {}
  ports: any[] = [];
  ngOnInit(): void {
    this.bbService.getODFs().subscribe((data) => {
      console.log(data);
      this.ports = JSON.parse(data[0].ports);
    });
  }
}

inside html component

<table>

// if the port number reaches 12 it goes to next row
  <tr>
    <td *ngFor="let port of ports">port.number</td>
  <tr/
</table

Output will be like that:

01|02|03|04|05|06|07|08|09|10|11|12|

13|14|15|16|17|18|19|20|21|22|23|24|

table of cores

Answer 1

You can create multi dimension array suppose you are getting data from API call in port array in following format

port = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
    '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'];

format the above array in multi Dimensional array as follow

multiDimensionalArray=[];

function for create multi Dimensional array when port number reaches 12 as follows

private createMultiDimensionalArray() {
    this.multiDimensionalArray[0] = [];
    let temp = [];
    for (let i = 0; i < this.port.length; i++) {
      const element = this.port[i];
      temp.push(element);
      if ((i + 1) % 12 == 0) {
        let j = 0;

        this.multiDimensionalArray[j].push(temp);
        temp = [];

      }
    }

  }

In HTML you can use the code as following code

<table>
  <ng-template ngFor let-item [ngForOf]="multiDimensionalArray " let-i="index">
    <tr *ngFor="let record of item">
      <td *ngFor="let num of record">
        {{num|json}}
      </td>
    </tr>
  </ng-template>

</table>