title: Angular2-materialize carousel load before service angular 5
body: <p>I use router with params of category, my router-link pass category from url to my service load data from category, but when i click in other category my carousel loads empty before new data.
  my data.</p>
  
  <p>My service:</p>
  
  <pre><code>getWine(id): Observable&lt;IWine&gt; {
    return this.http.get&lt;IWine&gt;('http://localhost:8888/example/getWines/' + id);
  }
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>export class WinesComponent implements OnInit {
  
  
  public Wines;
  
  
  
  constructor(private route: ActivatedRoute, private _dataService: WineService, private http: HttpClient) {
  }
  
  ngOnInit() {
     this.Wines = this.route.paramMap.pipe(
     switchMap((params: ParamMap) =&gt;
     this._dataService.getWine(+params.get('id'))
  ));
  }
  
  }
  </code></pre>
  
  <p>My view component:</p>
  
  <pre><code>&lt;div materialize="carousel" [materializeParams]="[{padding: 150}]" class="carousel center"&gt;
    &lt;a *ngFor="let wines of Wines | async" class="modal-trigger carousel-item wine " (tap)="openModal()" &gt;
        &lt;img src="assets/images/vinho.png"&gt;
        &lt;h2&gt;{{wines.name}}&lt;/h2&gt;
        &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit.&lt;/p&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to load the carousel after receiving the data</p>