Using Angular2 I'm trying to make a list from an array...something like:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `

        <ul>
            <li *ngFor="">
                {{names}}
            </li>
        </ul>

    `,
})
export class AppComponent {

    names = ['name1', 'name2', 'name3'];

}

How can I get something like this to work?

Using Angular2 I'm trying to make a list from an array...something like:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `

        <ul>
            <li *ngFor="">
                {{names}}
            </li>
        </ul>

    `,
})
export class AppComponent {

    names = ['name1', 'name2', 'name3'];

}

How can I get something like this to work?

• javascript
• angularjs
• angular

• Did you really have this problem? I would think any documentation with NgFor would demonstrate how to do this. I.e., I think it would take you longer to post this question then it would to find the answer with a simple Internet search. Questions are supposed to show some research effort. Obviously you know that something like #ngFor="" isn't going to work. You should show what you tried, and where you got stuck, or why you couldn't figure this out based on some documentation. – Mark Rajcok Commented Apr 12, 2016 at 14:51

2 Answers 2

Should be

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <ul>
            <li *ngFor="#name of names">
                {{name}}
            </li>
        </ul>
    `,
})

export class AppComponent {

    names = ['name1', 'name2', 'name3'];

}

If you came here looking for Angular Framework v2's syntax - not AngularJS v2 like me here it is:

        <ul>
            <li *ngFor="let name of names;">
                {{name}}
            </li>
        </ul>

Not saying anyone did anything wrong in the question or anything, their versioning and angular v.s. older angularjs is confusing IMO