title: Angular 10 : Property 'comments' does not exist on type 'typeof Dish'
body: <p>//This is the Error Message in Terminal
  <a href="https://i.stack.imgur.com/BL5iL.png" rel="nofollow noreferrer">r</a></p>
  <p>In localhost it says <strong>Cannot GET /</strong></p>
  <p>This is similar to the shopping cart
  I try to get data from external class(dishes.ts) and by clicking shopping Item it should show the description of Item and its view
  //This is the Component.html code</p>
  <pre><code>    &lt;div class=&quot;container&quot;
      fxLayout=&quot;row&quot;
      fxLayout.sm=&quot;column&quot;
      fxLayout.xs=&quot;column&quot;
      fxLayoutAlign.gt-md=&quot;space-around center&quot;
      fxLayoutGap=&quot;10px&quot; 
      fxLayoutGap.xs=&quot;0&quot;&gt;
  
    &lt;div fxFlex=&quot;40&quot;&gt;
      &lt;mat-card *ngIf=&quot;dish&quot;&gt;
          &lt;mat-card-header&gt;
              &lt;mat-card-title&gt;
                  &lt;h1 style=&quot;font-weight: bold&quot;&gt; {{dish.name | uppercase}}&lt;/h1&gt;
              &lt;/mat-card-title&gt;
          &lt;/mat-card-header&gt;
          &lt;mat-card-content&gt;
              &lt;img height=&quot;300px&quot; src=&quot;{{dish.image}}&quot; alt=&quot;{{dish.name}}&quot;&gt;
              &lt;h3&gt; {{dish.description}}&lt;/h3&gt;
          &lt;/mat-card-content&gt;
          &lt;mat-card-actions&gt;
              &lt;button mat-button &gt;LIKE&lt;/button&gt;
              &lt;button mat-button &gt;SHARE&lt;/button&gt;
            &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;    
    &lt;/div&gt;
    &lt;div fxFlex=&quot;40&quot;&gt;
      &lt;h1 style=&quot;font-weight: bold&quot;&gt;Comments&lt;/h1&gt;
      &lt;mat-list *ngIf=&quot;dish&quot;&gt;
          &lt;mat-list-item *ngFor=&quot;let cm of dish.comments&quot;&gt;  
          &lt;h4 matLine&gt;{{cm.comment}} &lt;/h4&gt;
          &lt;p matLine&gt;{{cm.rating}} star &lt;/p&gt;
          &lt;p matLine&gt;-- {{cm.author}} {{ cm.date | date}}&lt;/p&gt;
      &lt;/mat-list-item&gt;
      &lt;/mat-list&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>//This is the Component.ts code</p>
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import {Dish} from '../shared/dish';
  import{DISHES} from '../shared/dishes';
  @Component({
    selector: 'app-dish-details',
    templateUrl: './dish-details.component.html',
    styleUrls: ['./dish-details.component.scss']
  })
  export class DishDetailsComponent implements OnInit {
  
    dishes : Dish[]= DISHES;
    @Input()
    dish =Dish;
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>And also I added this to my github (<a href="https://github.com/KasunHasanga/AngularConFusion.git" rel="nofollow noreferrer">https://github.com/KasunHasanga/AngularConFusion.git</a>)</p>