Filling a Carousel from a Service


Topic: Filling a Carousel from a Service

Ro Sheh asked 3 years ago

Expected behavior I am consuming a service that returns an array of three objects (limited, observables) from which I would like to create slides in a carousel.

Actual behavior It looks like it puts all three slides into a "pile" of one (text is overwritten)

Resources (screenshots, code snippets etc.) I know that this is how we create a slide:

  <div class="carousel-item active">
    <img class="d-block w-100" src="http://placehold.it/800x300">
    <div class="carousel-caption d-none d-md-block">
      <h5>First slide label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
   </div>

I've added the *ngFor-Statement to produce a loop:

<div *ngFor="let teaser of hashtagsTeaser" class="carousel-item active">
    <img class="d-block w-100" src="http://placehold.it/800x300">
    <div class="carousel-caption d-none d-md-block">
      <h5>{{teaser.primaryHashtag}}</h5>
      <p>{{teaser.htCount}} Artikel in {{teaser.primaryHashtag}}</p>
    </div>
   </div>

I'm totally new to this, so any help is apreciated ;-)


Arkadiusz Idzikowski staff answered 3 years ago

You need to add *ngFor to the mdb-carousel-item component. Please take a look at this multiple carousel example:

https://mdbootstrap.com/docs/angular/advanced/carousel/#multi-item-carousel


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No