Angular 6 Transform rows to multiple columns

Question

I'm working on an application and I'm trying to format the report links how I want them. Ideally, there should be 3 or 4 rows, and at least 6 columns wide. I know I have to use a pipe to help with the formatting, I just cannot get the logic down. I tried using the pipe from another angular answer, however, it does not work (no rows will show).

Here is a code sample of my Angular 6 code:

<table>
  <tr *ngFor="let report of annualReports">
    <td><a href="#">{{ report.rptDisplayName }}</a> </td>
  </tr>
</table>

and the pipe:

@Pipe({ name: 'pairs' })
export class PairsPipe implements PipeTransform {
  transform(value: any) {
    return value.filter((v, i) => i % 2 == 0).map((v, i) => [value[i * 2], value[i * 2 + 1]])
  } 
}

Answer 1

did you apply 'pairs' in the HTML code? Also, using CSS Grid or bootstrap might be easy to achieve the same effect.