Angular - Display *ngFor in Row and Column

Question

I'm learning to use Angular and I have a problem with how to show data in columns.

In my app.components.ts I have:

<div class="cardComp" *ngFor="let person of people">
  <app-card-person [person]="person"></app-card-person>
</div>

// people is an array of objects

In my card-person.component.ts

<div class="card" style="width: 18rem;">
    <!-- <img src="..." class="card-img-top" alt="..."> -->
    <div class="card-body">
        <h5 class="card-title">{{person?.name}} {{person?.surname}}</h5>
        <p class="card-text">{{person?.description}}</p>
        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
    </div>
</div>

In this way, I obtain a list of cards but they are 1 per row:

CARD1
CARD2
CARD3
.....

What I would to obtain is:

CARD1                        CARD2
CARD3                        CARD4
.....                        .....

You should say if you are using a CSS Framework to help the community to give the best possible answer to your question. — Big Zed
– Big Zed, Commented Apr 5, 2022 at 11:11

Yong Shun · Accepted Answer · 2022-04-05 10:59:26Z

2

Solution 1: Work with flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 50%;
}

<div class="container">
  <div class="cardComp item" *ngFor="let person of people">
    <app-card-person [person]="person"></app-card-person>
  </div>
</div>

Result

Sample Solution 1 on StackBlitz

Recommended to read this Flexbox article.

Solution 2: Work with Bootstrap

Pre-requisites: Import Bootstrap CSS file.

<div class="row">
  <div class="cardComp col-6" *ngFor="let person of people">
    <app-card-person [person]="person"></app-card-person>
  </div>
</div>

Result

Sample Solution 2 on StackBlitz

answered Apr 5, 2022 at 10:59

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kent Wynn · Accepted Answer · 2022-04-05 11:16:46Z

1

CSS Grid

In your app.component.scss

.cardComp {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; // gap between columns
}

answered Apr 5, 2022 at 11:16

Kent Wynn

113 bronze badges

Collectives™ on Stack Overflow

Angular - Display *ngFor in Row and Column

2 Answers 2

Comments

CSS Grid

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

CSS Grid

Comments

Your Answer

Sign up or log in

Post as a guest

Related