title: display multiple nested data with angular6
body: <p>I'm receiving JSON data from an API which has some child objects as well. The API has a menu level and down the menu, it's having meals. What I want to do is to display meals relating to each menu under the menu</p>
  
  <p>JSON from API</p>
  
  <pre><code>[{"id":6,"name":"Menu 1","serveDate":"2019-05-10","meals":[{"id":13,"name":"Rice with Stew","description":"rice","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":5,"name":"Menu 2","serveDate":"2019-06-10","meals":[{"id":13,"name":"Corn Flakes,"description":"Flakes","image":"","mealType":"BREAKFAST","unitPrice":5,"status":"ENABLED"}]},{"id":4,"name":"Menu 3","serveDate":"2019-07-10","meals":[]}]
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div *ngFor="let item of menuList"&gt;
      &lt;h2&gt;Menu&lt;/h2&gt;
      {{item.name}} - {{item.servate}}
      &lt;h2 *ngFor="let item of menuList.meals"&gt;Meals&lt;/h2&gt;
      {{item.name}} - {{item.mealType}}
    &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>getMenus() {
    this.menuServices.menuList(this.pagedData)
    .subscribe(
      response =&gt; {
        if (response &amp;&amp; response.code === HttpStatus.OK) {
          this.menuList = response.data;
        }
      },
  
    );
  }
  </code></pre>
  
  <p>Any help on how to make this work correctly the way it should work?</p>