0

I'm making use angular/animations on my async data from firestore. I've followed an article and the guy used the async content inside ng-container. Without using it my content is working fine with 4 cards in a row. But ng-container forces them to be single card per line. This is the code without ng-container and animations that works fine and renders 4 cards per line on medium and large screens.

<div *ngFor="let project of projects | async" class="col-xs-12 col-md-3">
      <div class="card border-success mb-3">
        <div class="card-header-custom" [ngStyle]="{'background-color': project.colorCode}"></div>
        <div class="card-body">
          <h6 class="card-title">{{project.name}}</h6>
          <div class="row mt-5">
            <div class="col text-left">
              <img src="../../assets/images/image.jpg" class="people" id="firstImg">
              <img src="../../assets/images/image2.jpg" class="people" id="secondImg">
              <img src="../../assets/images/image3.jpg" class="people" id="thirdImg">
            </div>
            <div class="col text-right">{{project.taskKey}} Tasks</div>
          </div>
          <p class="card-text"></p>
        </div>
      </div>
    </div>

And this is the one with animations and container which is forcing the cards to be one per line.

<ng-container *ngIf='projects | async as projectsFromContainer'>
      <div [@listStagger]='projectsFromContainer.length'>

        <div *ngFor="let project of projectsFromContainer" class="col-xs-12 col-md-3">
          <div class="card border-success mb-3">
            <div class="card-header-custom" [ngStyle]="{'background-color': project.colorCode}"></div>
            <div class="card-body">
              <h6 class="card-title">{{project.name}}</h6>
              <div class="row mt-5">
                <div class="col text-left">
                  <img src="../../assets/images/image.jpg" class="people" id="firstImg">
                  <img src="../../assets/images/image2.jpg" class="people" id="secondImg">
                  <img src="../../assets/images/image3.jpg" class="people" id="thirdImg">
                </div>
                <div class="col text-right">{{project.taskKey}} Tasks</div>
              </div>
              <p class="card-text"></p>
            </div>
          </div>
        </div>

      </div>
    </ng-container>

Image

Saad Ashfaq
  • 188
  • 1
  • 2
  • 12
  • 1
    Please provide a [mcve] of your issue. –  Jan 15 '19 at 11:38
  • I've updated the question with code samples. Check it out – Saad Ashfaq Jan 16 '19 at 06:10
  • stackblitz would make it much easier to help – Akber Iqbal Jan 16 '19 at 06:15
  • i would need to setup angularfire. perform queries from firestore. set up data on the angular view. It's just a simple question bro – Saad Ashfaq Jan 16 '19 at 06:27
  • Yeah well usually when you have HTML issues you have to reproduce it, otherwise we can't know the issue. And you can mock it, you don't need to install Angular Firebase. It might be just a question, but unless you provide a [mcve], you won't have an aswer, bro. –  Jan 16 '19 at 08:11
  • sure. Thanks for your response. This is my first time here, so i don't know much. I'll try to follow these things and ask again. – Saad Ashfaq Jan 16 '19 at 08:15

0 Answers0