title: my question is about Can't bind to 'ngFor' since it isn't a known property of 'li' , Why am getting this error?
body: <p><strong>The error points to the *ngFor of nonvegfoodlist</strong></p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  export class Menu 
  {
    id : number;
    name :string;
  }
  const veg : Menu[] = [
  
    { id:1 , name:'Rice'},
    { id:2 , name:'Dosa'},
    { id:3 , name:'Biriyani'},
    {id :4 , name:'Pongal'}
  ];
  const nonveg :Menu[] =[
  
    {id :5 , name:'Fish Curry'},
    {id:6, name:'Fish Fry'},
    { id:7 , name:'Half CB'}
  ];
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Restarunt';
    vegfoodlist = veg ;
    nonvegfoodlist = nonveg;
  
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;html&gt;
  
    &lt;body&gt;
    &lt;h1&gt;
      {{title}}
    &lt;/h1&gt;
    &lt;h2&gt;Veg Food list&lt;/h2&gt;
    &lt;div&gt;
    &lt;ul class="vegfoodlist"&gt;
  
      &lt;li *ngFor ="let content of vegfoodlist"&gt;
       &lt;span&gt;{{content.name}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;ul class=" nonvegfoodlist"&gt;
      &lt;li *ngFor ="Let conten in  nonvegfoodlist"&gt;
        &lt;span&gt;{{conten.name}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the list of errors that am getting from console:</p>
  
  <blockquote>
    <p>Can't bind to 'ngFor' since it isn't a known property of 'li'</p>
    
    <p>Property binding ngFor not used by any directive on an embedded template. Make >sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".</p>
  </blockquote>
  
  <p>These are my questions,
  1) is it possible to use multiple <code>ngFor</code></p>