The error points to the *ngFor of nonvegfoodlist
appponent.ts
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: './appponent.html',
styleUrls: ['./appponent.css']
})
export class AppComponent {
title = 'Restarunt';
vegfoodlist = veg ;
nonvegfoodlist = nonveg;
}
appponent.html
<html>
<body>
<h1>
{{title}}
</h1>
<h2>Veg Food list</h2>
<div>
<ul class="vegfoodlist">
<li *ngFor ="let content of vegfoodlist">
<span>{{content.name}}</span>
</li>
</ul>
</div>
<div>
<ul class=" nonvegfoodlist">
<li *ngFor ="Let conten in nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
</ul>
</div>
</body>
</html>
This is the list of errors that am getting from console:
Can't bind to 'ngFor' since it isn't a known property of 'li'
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".
These are my questions,
1) is it possible to use multiple ngFor
The error points to the *ngFor of nonvegfoodlist
app.ponent.ts
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.ponent.html',
styleUrls: ['./app.ponent.css']
})
export class AppComponent {
title = 'Restarunt';
vegfoodlist = veg ;
nonvegfoodlist = nonveg;
}
app.ponent.html
<html>
<body>
<h1>
{{title}}
</h1>
<h2>Veg Food list</h2>
<div>
<ul class="vegfoodlist">
<li *ngFor ="let content of vegfoodlist">
<span>{{content.name}}</span>
</li>
</ul>
</div>
<div>
<ul class=" nonvegfoodlist">
<li *ngFor ="Let conten in nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
</ul>
</div>
</body>
</html>
This is the list of errors that am getting from console:
Can't bind to 'ngFor' since it isn't a known property of 'li'
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".
These are my questions,
1) is it possible to use multiple ngFor
- Not a solution - but a suggestion - wouldn't it be better to have a single array of food items and have a property of "type" for each - which can be veg- or non-veg.. that way its easier to maintain and you can filter it to get all items with a type of "veg" etc to create the filtered arrays for your different lists. Then you could also extend it and have an "allergen" property as well eg: contains gluten.... – gavgrif Commented Nov 28, 2018 at 5:25
- see stackoverflow./questions/34012291 for more info (possible duplicate) – Marcus Commented Dec 30, 2020 at 20:52
5 Answers
Reset to default 3NgFor is a structural directive which is located in the CommonModule. You need to import CommonModule and add into that module where you have used NgFor.
there is a typo mistake in *ngFor replace Let with let and second mistake is you are using Let conten in nonvegfoodlist while you can not use in in ngFor. so also need to replace in with of like this.
let conten of nonvegfoodlist
<html>
<body>
<h1>
{{title}}
</h1>
<h2>Veg Food list</h2>
<div>
<ul class="vegfoodlist">
<li *ngFor ="let content of vegfoodlist">
<span>{{content.name}}</span>
</li>
</ul>
</div>
<div>
<ul class=" nonvegfoodlist">
<li *ngFor ="let conten of nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
</ul>
</div>
</body>
</html>
typo mistake, you need to use let instead of Let
<ul class=" nonvegfoodlist">
<li *ngFor ="let conten of nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
</ul>
<li *ngFor ="let conten in nonvegfoodlist">
<span>{{conten.name}}</span>
</li>
I could see a typo here "Let" should be "let"
Just a typo make it as
<li *ngFor ="let content of vegfoodlist">
<span>{{content.name}}</span>
</li>
and
<li *ngFor ="let conten of nonvegfoodlist">
<span>{{conten.name}}</span>
</li>