Angular table with 4 columns different items

Question

I was busy making a table with Angular, one row has to look like this:

The problem is i get the same products in one row or only one column in a row. Look:

export class ProductsComponent implements OnInit {

input_product: string;
products = ['kaas', ' prei', 'loempia', 'wcpapier', 'bananen', 'nootjes'];
// products = [];


onClick_addProduct() {
    this.input_product = (<HTMLInputElement>document.getElementById('input_product')).value;
    this.products.push(this.input_product);
  }

  constructor() { }

  ngOnInit() {
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table  class="table table-sm table-dark">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let product of products"  >
          <td >{{product}}</td>
          <td >{{product}}</td>
          <td >{{product}}</td>
          <td >{{product}}</td>
        </tr>
  </tbody>
</table>

I tried this: Display a Table using Components with Angular 4 but i got problems with the last part: (app-table-row [character]="ch" [columns]="columns")

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table>
  <tr>
    <th *ngFor="let c of columns">{{c}}</th>
  </tr>
  <tr *ngFor="let ch of characters | async" 
      app-table-row 
      [character]="ch" 
      [columns]="columns">
  </tr>
</table>

I think it's a convention error, but I'm not sure...

Is there a easy way to show the products in 4 columns? Because i can't seem to find how to list the products with an index. :(

Answer 1

I made a change to the data (Actual objects) https://stackblitz.com/edit/angular-gwbc2q

Products now looks like this:

  products = [{name:"tire1", line:"impressive"},{name:"brand X", line: "economy plus"},
  {name:"hard plasticos",line:"urban destroyer"},{name:"happy ride", line:"smooth and sticky"}]

And in Angular:

*ngFor is just a foreach loop: So foreach product in products make a row looks like:

<tr *ngFor="let product of products"  >
     <td >{{product.line}}</td>
     <td >{{product.name}}</td>
</tr>

Answer 2

Id recommend using divs instead of a table, this is not tabular data.

Try this:

<div class="product" *ngFor="let prod of products">
  {{prod}}
</div>

And in the CSS:

.product {
  width: 25%;
  display: inline-block;
  border: 1px solid black;
  box-sizing: border-box;
}

Here is a StackBlitz example