I am doing a small project using angular with api and part of the project is to display images using carousel. Basically, I have a page "Gallery" with a list of places, and once the user clicks on a certain place, all the images of that place are showed.. This works as I have tested it without carousel.. Even with carousel it works, however, only when I refresh after I click on the place. In other words, when I click on a place, I get shown the active image of the carousel but it does not show the other images.. However, if I click on a place (and go to its images) and click refresh, I get the active image and the the next image, etc, meaning works perfectly.. I even showed it to my lecturer who tried debugging it for 1 hour and did not know what the problem is.. Would be great if I get to know what the problem is.. Thanks!
<h1 class="text-center bg-secondary text-white py-2 m-0">{{placeFromUrl}}</h1>
<div class="card bg-primary">
<div class="card-body">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/250px-Angular_full_color_logo.svg.png" class="d-block w-50 mx-auto">
</div>
<div class="carousel-item" *ngFor="let image of placeImages">
<img src="data:image/jpeg;base64,{{image.bytes}}" class="d-block w-50 mx-auto">
</div>
</div>
</div>
</div>
</div>
<a class="btn btn-secondary col-md-12 mb-2" routerLink='/gallery' routerLinkActive="active">{{'HOME.backToList' | translate}}</a>
