CODEWITHSUNDEEP
angularjsbootstrap-4
Jay Taplin
Jay Taplin

Reputation: 570

Dynamic population of Bootstrap 4 carousel via Angular 4 not displaying images

I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.

Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:

    ngOnInit() {
        this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
    }

The HTML markup looks like this:

<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
    <div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
        <img class="d-block img-fluid w-100" [src]="image" >
    </div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.

Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.

Upvotes: 2

Views: 3484

Answers (1)

Liam Fleming
Liam Fleming

Reputation: 1106

It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.

Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}

Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.

Upvotes: 3

Related Questions