anguar array to matrix

Question

anguar array to matrix

Navigation

#1 by (0 votes)

0

my question is the following with angular I rescue an app arrangement 100 items and I show them in the view with the ngFor, until there everything is fine but what I want is that instead of showing in this way

item
item
item

is displayed in this way (as a matrix)

item item item item
item item item item
item item item item

as when they see the page of a store and the products appear by rows and columns instead of a single column of products , I'm using bootstrap 4 and angular 4.

Thank you in advance!

array bootstrap-4 angular4

asked by Felipe Andres 22.01.2018 в 19:52

source

1 answer

Recaptcha is not validated PHP combobox mysql

score 0 · Accepted Answer

Since you use Boostrap , this is based on a Grid of up to 12 columns, so you can divide your items in each column, from 1 to 12 units wide. If each item occupies 1 unit, 12 items per row will be seen, if one item occupies 12 units, it will be the only one in the row.

Small explanatory example:

.col-8{
background-color: yellow;
}
.col-4{
background-color: green;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

<div class="row">
  <div class="col-4">1er columna</div>
  <div class="col-4">2da columna</div>
  <div class="col-4">3ra columna</div>
</div>

How could you do what you want:

<div class = "row">
    <div class = "col-4" *ngFor= "let item of items">
         //Mostraría 3 items por fila
        <p>{{item.name}}</p>
    </div>
</div>

<div class = "row">
    <div class = "col-3" *ngFor= "let item of items">
         //Mostraría 4 items por fila
        <p>{{item.name}}</p>
    </div>
</div>

As you saw earlier, you can modify the size of the column and Show as many items as possible.