Angular 2 *ngFor not working

Question

Following is my Component:

import { Component } from 'angular2/core';

@Component({
  selector: 'test',
  template: 
     `
      <ul >
        <li *ngFor="let t of test">
         <span >{{t}}</span>
        </li>
      </ul>
     `
})

export class TestComponent implements OnInit{
  test: string[];
  constructor(){
    this.test = ["Saab", "Volvo", "BMW"];
  }
}

I am getting the following error when I try to load the component:

  EXCEPTION: Template parse errors:
    Can't bind to 'ngFor' since it isn't a known native property ("<ul >
        <li [ERROR ->]*ngFor="let t of test">
            <span >{{t}}</span>
        </li>
    "): 

Also, I am not sure whether I should use '@angular/core' or 'angular2/core' while importing Component.

Sight

@angular/core comes from the release candidate and is more recent. Not certain why you'd be seeing this error though. – Goldner

Which version of Angular2 do you use? – Recidivate

Think you should be importing from @angular/core if you are using "2.0.0-rc.1" – Nevermore

I am trying to use Angular2 in my Electron application. I set up the environment, following these guidelines: xplatform.rocks/2016/02/14/… But he is using angular/core. If I change the package.json, to import from @angular/core. What changes needs to be done to the gulp file. I couldn't figure out which all the files that need to be copied to the dist folder. It would be very helpful, if you can give shed some light on this. Thanks – Sight

You could try *ng-for instead. If this works then you have a really old Angular2 version. – Matinee

Answer 1

The problem might occur because you havent imported the common module to your current module your'e using.

try import

import { CommonModule } from "@angular/common";

into your current module and see if the issue fixed.

the common module add all the built in directives from angular 2.

see commonModule documentation by angular.io

hope that helps :)

Unregenerate

Answer 2

I ran into the same problem, after a lot of searching and testing, I just found out that I forget declare my component in the 'declarations' in the module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { SearchComponent } from './search.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: SearchComponent },
    ])
  ],
  exports:[
  ],
  declarations: [
    SearchComponent 
  ],
})
export class SearchModule { }

Krawczyk

Oh my gosh this is it for me to. Can you please explain if you do know why this is the case? Why does the page work correctly but not the *ngFor. I am very new to angular. – Rapp

@NicParmee I am not sure, but I found this answer is pretty clear https://mcmap.net/q/1321696/-ngfor-is-not-working-in-angular-2 – Krawczyk

Answer 3

Your template should be:

<ul>
    <li *ngFor="#t of test">
        <span >{{t}}</span>
    </li>
</ul>

Or this way in newer versions:

<ul>
    <li *ngFor="let t of test">
        <span>{{t}}</span>
    </li>
</ul>

Offense

Using # in ngFor is not recommended any more and all its usage should be converted to 'let' – Armijo

@Sight then you have an outdated Angular2 version. – Matinee

@HarryNinh I commented that because he import 'angular2/core' library. So he should use the template in that way. To use 'let' he should import '@angular/core' – Offense

Understood! I was using an outdated Angular2 version. Now it works for me. Thanks All! – Sight

Answer 4

I experienced a similar behavior. The problem was that I was including the minimized version of Angular 2 in my HTML.

If it is so, try to include the unminimized file of Angular

Dockery

Answer 5

Using Let resolved the issue for me

<ul>
   <li *ngFor = "let test of testArray">{{test}}</li>
</ul>

Monogenic

Answer 6

By me the problem was that I was using Webpack with a HTML loader that was minimizing the HTML before Angular got to compile it thereby removing the * from the ngFor.

{
    test: /\.html$/,
    use: [ {
        loader: 'html-loader',
        options: {
        //minimize: true, // Make sure that you are not minimizing when using Angular
        removeComments: false,
        collapseWhitespace: false
    }
}

Hobson