title: Cannot read property '0' of undefined in angular 6
body: <p>I'm getting this error in console, <strong><em>Cannot read property '0' of undefined</em></strong> but still I'm getting the result as expected.</p>
  
  <p>This is my HTML code</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
    &lt;div class="slider-product"&gt;
      &lt;a href="#"&gt;
        &lt;img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;"&gt;
        &lt;span class="tag"&gt;{{featureProducts[0].cat_name}}&lt;/span&gt;
        &lt;div&gt;
          &lt;a class="title"&gt;{{featureProducts[0].name}}&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="price"&gt;
          &lt;i class="fa fa-inr"&gt;&lt;/i&gt; {{featureProducts[0].min_price}}
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the function in typescript file</p>
  
  <pre><code>getFeatureProducts(){
  this.httpClient.get(this.baseUrl+`/getFeatureProducts`)
    .subscribe(
      (data:any[]) =&gt; {
        if(data.length) {
        this.featureProducts = data;
        }else{
        this.featureProducts = null;         
      }
      }
      )}
  </code></pre>
  
  <p>featureProducts is declared inside the class as</p>
  
  <pre><code>featureProducts: any;
  </code></pre>
  
  <p>I know there is work around to this problem, like I can use multiple variables as below</p>
  
  <p>in typescript</p>
  
  <pre><code>imgpath0 = this.featureProducts[0].imgPath;
  </code></pre>
  
  <p>And using this variable in html directly as </p>
  
  <pre><code>{{imgPath0}}
  </code></pre>
  
  <p>But this is not a better approach as I have lot of properties to be displayed in html and I cannot declare as many variables in ts.</p>
  
  <p><strong>Note:</strong> <em>I don't want to loop using 'for' in html. Instead I need to fetch the properties as we usually do in JSON.</em></p>