*ng-for is not working in angular 2 todo app

Question

I am writing an angular 2 app. In the quick start tutorial, all things are working fine but in my todo app, its not working.

app.component.ts

import {Component, Template, View, NgFor, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'todo-app',
})

@View({
  directives : [NgFor, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

@Template({
    url: 'components/todo-app/todo-app.html'
 })

class TodoAppComponent {
  todos : Array;
  constructor() {
    this.todos = [];

    TodoFactory.getAll().then((data) =>{
       this.todos = data; // I got JSON in todos object.
    });
  }
}

todo-app-html

<div *ng-for='#todo of todos'>
    {{ todo.text }}
</div>

In my template, *ng-for is not working. Even when I try {{ todos }}, it shows all of the data. I searched a lot and found that I should pass NgFor core directives to the template like directives : [NgFor] This is also not working. Any single help would be appreciated.

No need to add `NgFor`, `CORE_DIRECTIVES`, `FORM_DIRECTIVES` to providers, they are provided by default. — Günter Zöchbauer, Mar 07 '16 at 13:06
https://plnkr.co/edit/ebr2zq?p=preview It has to be related how you get your data but that part is missing from your question. — Günter Zöchbauer, Mar 07 '16 at 13:14
`@Template`? That's like alpha 10 or lower. You should set `templateUrl` in your `@Component` or `@View`. — Eric Martinez, Mar 07 '16 at 13:28

Thierry Templier · Answer 1 · 2016-03-07T13:17:45.473

2

You should *ngFor instead of *ng-for:

<div *ngFor="#todo of todos">
  {{ todo.text }}
</div>

Otherwise, you don't need anyore to specify the NgFor, core and form directives...

Edit

Perhaps you load your data outside the context of Angular2. In this case you could try to leverage the NgZone class, as described below:

class TodoAppComponent {
  todos : Array;
  constructor(private ngZone:NgZone) {
    this.todos = [];

    TodoFactory.getAll().then((data) =>{
      this.ngZone.run(() => {
        this.todos = data; // I got JSON in todos object.
      });
    });
  }
}

See this plunkr for more details: https://plnkr.co/edit/KKj1br?p=preview

edited Mar 07 '16 at 13:17

answered Mar 07 '16 at 13:04

Thierry Templier

198,364
44
396
360

Yes, I've already been tried the same, but unfortunately didn't work. Neither I get any console error. – Vineet Mar 07 '16 at 13:06
How do you load your data? – Thierry Templier Mar 07 '16 at 13:08
I am loading the data from a factory ie `TodoFactory`. – Vineet Mar 07 '16 at 13:10
I mean do you use an external tool? Here is a plunkr that works for ngFor: https://plnkr.co/edit/KKj1br?p=preview. – Thierry Templier Mar 07 '16 at 13:12
Because, if the tool you use is instantiated outside angular2, zones won't detect changes. To prevent from this, you could leverage NgZone... – Thierry Templier Mar 07 '16 at 13:13
Okay let me try first. – Vineet Mar 07 '16 at 13:16
Your plunker gives me an error ie `Error: Array.from is not a function`. Will you please elaborate it for me? – Vineet Mar 07 '16 at 13:20
Is it better like this? I added `es6-shim.min.js`... In Chrome, it works – Thierry Templier Mar 07 '16 at 13:22

score 0 · Answer 2 · answered Mar 07 '16 at 13:18

Which version of Agular2 do you use????

For latest version you may try this,

import {Component, Template, View, bootstrap, FORM_DIRECTIVES} from 'angular2/angular2';

change them to,

import {Component,View,bind} from 'angular2/core';
import {bootstrap}  from 'angular2/platform/browser';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators } from 'angular2/common'; // CORE_DIRECTIVES contains all common required API

then,

<div *ngFor="#todo of todos">
  {{ todo.text }}
</div>

score 0 · Answer 3 · answered Mar 17 '16 at 13:54

0

The angular team removed every dashes (-) from template directives in the beta releases.

Therefore:

ng-for, ng-model, ng-class,...

are now:

ngFor, ngModel, ngClass,...

when using angular2.0.0-beta.0 and more

answered Mar 17 '16 at 13:54

Pat M

5,966
7
24
34

score 0 · Answer 4 · answered Nov 15 '16 at 01:59

In RC version of Angular 2 , angular team has removed # from templating syntax inside *ngFor and has changed *ng-for to *ngFor , Use let instead of #

Previously you were using

<div *ng-for='#todo of todos'>
    {{ todo.text }}
</div>

You should use

<div *ngFor='let todo of todos'>
    {{ todo.text }}
</div>

*ng-for is not working in angular 2 todo app

4 Answers4

Linked