title: angular owl carousel not working with http data
body: <p>i'm getting data through http get. Afterwards i iterate over my images and add it inside an image array. If i declare my array directly with image url's its working fine but if i get my data async it showing this way:
  <a href="https://i.stack.imgur.com/kWiva.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWiva.jpg" alt="this is the right way"></a></p>
  
  <p>and here is how it looks like with my http get:
  <a href="https://i.stack.imgur.com/KDX0A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KDX0A.jpg" alt="wrong one"></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>  images = [];
   loadRestaurantInfos() {
  this.acivatedRoute.paramMap.subscribe(params =&gt; {
    const url = `http://localhost:5000/location/searchnameonly?searchstring=${params.get('id')}`
    const data = this.http.get&lt;any&gt;(url, {
      headers: {token: this.apikey},
    });
    data.subscribe(datavalue =&gt; {
      this.images = [];
      if(datavalue.length&gt;0){
        this.dataset = datavalue[0];
       this.setUpImageGallery(this.dataset.images);
  
      }else{
        this.router.navigate(['locations'])
      }
    })
   });
  </code></pre>
  
  <p>}</p>
  
  <pre><code>  setUpImageGallery(imagedata) {
    imagedata.forEach(element =&gt; {
      this.images.push(element);
    });
  </code></pre>
  
  <p>}</p>
  
  <p>and here is my html: </p>
  
  <pre><code>    &lt;owl-carousel
    [options]="{
      lazyLoad:true,
      responsive:{
  '320':{
      items:1,
      autoplay:true,
      loop: true
  
  },
  '600':{
      items:1.5,
       autoplay:true,
      loop: false
  
  },
   '980':{
      items:2,
      autoplay:true,
      loop: false
  },
  '1025':{
    items: 3,
    autoplay:true,
    loop: false
  }}}"&gt;
  &lt;div *ngFor="let image of images" class="item"&gt;
    &lt;img src="{{image}}"&gt;
  &lt;/div&gt;
  
  &lt;/owl-carousel&gt;
  </code></pre>