CODEWITHSUNDEEP
angularbootstrap-4
Kasia Ka
Kasia Ka

Reputation: 41

Cards in Angular/Bootstrap

I am trying to create a one page website displaying episode information. I have a mongoDB which stores 50 episodes each being an object on its own. I am using Bootstrap 4 and I cant seem to figure out how to create multiple cards automatically once the data is read in instead of writing the code 50 times. I want each object to display in a card on its own. Is there a way of doing that?

Here is what I have so far:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div 
        class="card" 
        style="width: 25rem;">
        <img 
          src="..." 
          class="card-img-top" 
          alt="...">
        <div *ngFor="let episode of episodes_list">
          <div class="card-body">
            <h5 class="card-title">
              {{episode.name}}
            </h5>
            <h6 class="card-subtitle mb-2 text-muted">
              Season {{episode.season}} Episode {{episode.number}}
            </h6>
            <h6 class="card-footer mb-1 text-muted">hehe</h6>
            <p class="card-text">{{episode.summary}}</p>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 5053

Answers (2)

C.OG
C.OG

Reputation: 6529

The *ngFor directive needs to be moved further up the chain.

 <div class="container">
    <div class="row">
        <div class="col-md-12" *ngFor="let episode of episodes_list">
                <div class="card" style="width: 25rem;">
                        <img src="..." class="card-img-top" alt="...">
                    <div>
                        <div class="card-body">
                            <h5 class="card-title">{{episode.name}}</h5>
                            <h6 class="card-subtitle mb-2 text-muted">Season {{episode.season}} Episode {{episode.number}}</h6>
                            <h6 class="card-footer mb-1 text-muted">hehe</h6>
                            <p class="card-text">{{episode.summary}}</p>
                            <a href="#" class="btn btn-primary">View</a>
                        </div>
                    </div>
               </div>
        </div>
    </div>
</div>

You'll need to iterate over the element with class="col-md-12"

Upvotes: 2

SiddAjmera
SiddAjmera

Reputation: 39432

You should be iterating on the col with card inside it. You're currently iterating inside card.

Give this a try:

<div class="container">
  <div class="row">
    <div class="col-md-12" *ngFor="let episode of episodes_list">
      <div 
        class="card" 
        style="width: 25rem;">
        <img [src]="episode.poster" class="card-img-top" alt="...">
        <div>
          <div class="card-body">
            <h5 class="card-title">{{episode.name}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">Season {{episode.season}} Episode {{episode.number}}</h6>
            <h6 class="card-footer mb-1 text-muted">hehe</h6>
            <p class="card-text">{{episode.summary}}</p>
            <a href="#" class="btn btn-primary">View</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I actually created a Sample Movie App a while back and I'm doing something similar there.

Here's a Working Code Demo Example for your ref.

Upvotes: 4

Related Questions