title: Carousel in angular does not work unless I click refresh
body: <p>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!</p>
  
  <pre><code>&lt;h1 class="text-center bg-secondary text-white py-2 m-0"&gt;{{placeFromUrl}}&lt;/h1&gt;
  &lt;div class="card bg-primary"&gt;
  &lt;div class="card-body"&gt;
      &lt;div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000"&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="carousel-item active"&gt;
                  &lt;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"&gt;
              &lt;/div&gt;
              &lt;div class="carousel-item" *ngFor="let image of placeImages"&gt;
                  &lt;img src="data:image/jpeg;base64,{{image.bytes}}" class="d-block w-50 mx-auto"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/div&gt;    
  &lt;/div&gt;
  &lt;a class="btn btn-secondary col-md-12 mb-2" routerLink='/gallery' routerLinkActive="active"&gt;{{'HOME.backToList' | translate}}&lt;/a&gt;
  </code></pre>