Angular: Display data by rows (3 rows only)

Question

I'm new to programming. I want to try using angular to display elements by rows, with a limit of 3 elements per row. (Using *ngFor) For example, like this image with 3 elements in a row I use the slicing pipeline, but this only requires the 3rd element.

Can anyone help me or show me a code example

P粉670838735 · Answer

You can use a simple *ngFor and use CSS Grid with any row or column to sort the elements. Alternatively, you can add grid-auto-flow: column; to sort the elements in the column.

import {
  Component
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8];
}

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}

.element {
  border: 2px solid black;
  text-align: center;
  font-weight: bold;
  padding: 5px;
  font-size: 12px;
}


  Element {{ element }}

You can try this code on stackblitz