Angular2 create a list from array

Question

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?

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
– Mark Rajcok, Commented Apr 12, 2016 at 14:51

Richard Vanbergen · Accepted Answer · 2016-04-11 22:28:13Z

7

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'];

}

answered Apr 11, 2016 at 22:28

Richard Vanbergen

1,9641 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Satch3000 Over a year ago

I'm getting name1,name2,name3 in each line so 3 times name1,name2,name3 ... how can I get it to just show 1 name for each line?

MSwehli Over a year ago

You most likely typod in your code, putting {{names}} instead of {{name}}, as per the example in the plnkr i posted above.

Richard Vanbergen Over a year ago

@MSwehli I did originally but I quickly corrected it :)

MSwehli Over a year ago

@RichardVanbergen didn't actually notice you did too, but i meant that aboutn Satch3000's code so i guess thats where the original issue started :)

OZZIE · Accepted Answer · 2021-12-07 11:58:22Z

0

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

answered Dec 7, 2021 at 11:58

OZZIE

7,47410 gold badges64 silver badges66 bronze badges

Collectives™ on Stack Overflow

Angular2 create a list from array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related