priyanka.sarkar priyanka.sarkar - 27 days ago 7
Javascript Question

Iterated names are not displaying using ngFor in angular2

I am new to Angular2. I wanted to display the list of items . In my first-angular-js-2-application.js file I have done as under

import {Component, View} from 'angular2/core';

@Component({
selector: 'first-angular-js-2-application'
})

@View({
templateUrl: 'first-angular-js-2-application.html'
})

export class FirstAngularJs2Application {

constructor() {
console.info('FirstAngularJs2Application Component Mounted Successfully');

public products = [
{name: "Butter"},
{name: "Milk"},
{name: "Yogurt"},
{name: "Cheese"},
];
}
}


and in first-angular-js-2-application.html I have

<h1><b><font color="blue">Product names</font></b></h1>
<ul>
<li *ngFor="#p of products" >
{{ p.name }}
</li>
</ul>


Now when I run the application, it is not displaying the product names.

What wrong I am making?

N.B.~ I have generated Angular2 application through Yoeman

Answer

try this

<li *ngFor="let p of products" >
                  {{ p.name }}
              </li>

I have created a plnkr but it is final version of angular2

Plunker Demo

Comments