angular 4 : Can't bind to 'ngForFor' since it isn't a known property of 'li'
13,437
should be of
instead of for
inside the ngFor
ngFor="let hobby of hobbies"
Author by
sa_1130
Updated on August 03, 2022Comments
-
sa_1130 almost 2 years
I've just started learning angular 4. This is a simple code that I'm trying to implement in Visual Studio Code, but keep getting this error.
Uncaught Error: Template parse errors: Can't bind to 'ngForFor' since it isn't a known property of 'li'. (" </ul> <ul> <li [ERROR ->]*ngFor="let hobby for hobbies">{{hobby}}</li> </ul>"): ng:///AppModule/UserComponent.html@6:6 Property binding ngForFor 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".(" </ul> <ul> [ERROR ->]<li *ngFor="let hobby for hobbies">{{hobby}}</li> </ul>"): ng:///AppModule/UserComponent.html@6:2
I tried previous solutions of adding the CommonModule to the app.module file. But it hasn't solved the issue.I cannot figure out what is wrong.
app.component.ts:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }
app.module.ts:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { UserComponent } from './components/user/user.component'; import {CommonModule} from '@angular/common'; @NgModule({ declarations: [ AppComponent, UserComponent ], imports: [ BrowserModule,CommonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
user.component.ts:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { name:string; age:number; address: Address; hobbies:string[]; constructor() { console.log('constructor ran ...'); } ngOnInit() { console.log('ngOnInit ran ...'); this.name='Raul'; this.age=22; this.address= { street:'abc', city:'xyz', country: 'jkl' } this.hobbies=['reading','playing','swimming']; } } interface Address{ street:string, city:string, country:string }
user.component.html:
<h1>{{name}}</h1> <ul> <li>Age:{{age}}</li> <li>Address:{{address.street}}, {{address.city}},{{address.country}}</li> </ul> <ul> <li *ngFor="let hobby for hobbies">{{hobby}}</li> </ul>