title: Why carousel of materialize css and *ngFor not working together dynamicaly to get images
body: <p>I'm trying to materialize angular code for carousel. The carousel is associated to a dynamic array but when i use <code>*ngFor</code> with carousel class its not working.</p>
  
  <p>I tried writing the <code>class="carousel-item"</code> inside for loop but console shows: </p>
  
  <blockquote>
    <p>Cannot read property 'clientWidth' of undefined. </p>
  </blockquote>
  
  <p>This code not working:</p>
  
  <p><strong>Template:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="carousel carousel-slider"&gt;
      &lt;div class="carousel-item" href="#one!"&gt;
         &lt;div *ngFor ="let item of items;let i = index"&gt;
             &lt;img src={{items[i]}}&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component:</strong> </p>
  
  <pre class="lang-js prettyprint-override"><code>options = {fullWidth: false};
  
  constructor(private http: HttpClient) {
  }
  
  ngOnInit() {
      var elems = document.querySelectorAll('.carousel');
      var instances = M.Carousel.init(elems, this.options);
  }
  </code></pre>
  
  <p>I'm only getting one image that too which is cropped in half where as if i remove the for loop and write <code>&lt;div class="carousel-item"&gt;</code> one after the other like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a class="carousel-item" href="#one!"&gt;&lt;img src={{items[0]}}&gt;&lt;/a&gt;
  &lt;a class="carousel-item" href="#two!"&gt;&lt;img src={{items[1]}}&gt;&lt;/a&gt;
  &lt;a class="carousel-item" href="#three!"&gt;&lt;img src={{items[2]}}&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Doing this, I get the carousel working but it is not binded to a dynamic array which is what i want.</p>