0

I'm trying to display up to 2 cards in a card deck. If there are any additional cards to display, they should be placed in a new deck, below the previous one.

How can I achieve this? Where can I specify the maximum number of cards for each deck?

The HTML looks like this (with a little bit of Angular):

<div class="card-deck">
  <div *ngFor="let item of dataService.getItems()" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>
eden881
  • 164
  • 1
  • 8
  • 1
    This sounds more like application logic than something which belongs in your markup. – Matt Oct 09 '17 at 22:23
  • 1
    Why not simply change how many cards are returned in `dataService.getItems()`? I'm no Angular expert, but I'd think you'd want the `ngFor` to be **outside** of `
    `, with a conditional `ngIf` deciding whether it should append to the deck or create a new one.
     – Obsidian Age Oct 09 '17 at 22:23
  • provide your js code as well – divya reddy Oct 09 '17 at 22:24

1 Answers1

1

Solved it with inspiration from Obsidian Age's advice.

Changed dataService.getItems() so it returns groups of 2 items.

<div *ngFor="let group of dataService.getItems()" class="card-deck my-3">
  <div *ngFor="let item of group" class="card">
    <div class="card-body">
      <h4 class="card-title">{{ item.title }}</h4>
      <p class="card-text">{{ item.content }}</p>
      <p class="card-text"><small class="text-muted">Item ID: {{ item.id }}</small></p>
    </div>
    <div class="card-footer">
      <div class="text-right">
        <div class="btn-group" role="group" aria-label="Controls">
          <button type="button" class="btn btn-primary btn-sm">Reply</button>
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>
eden881
  • 164
  • 1
  • 8