CODEWITHSUNDEEP
angular
balu
balu

Reputation: 45

display a list in ng for in angular 2

i am newer to angular 2 i wrote the code for displaying the movies list but it displaying an error please check my code...

below is my code

component.ts: file

import { Component} from '@angular/core';
@Component({
  selector:'my-app',
  template:`<h1>welcome to my shop</h1>
  <p>we have the following movies available</p>
  <div>
  <p *ngfor=#movie of movieList>{{movie}}</p>
  </div>`
})
export class MyShopComponent{
  public movieList=['batman vs superman','civil war','deadpool']
}

app.module.ts: file

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { MyShopComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    MyShopComponent
  ],
  bootstrap: [ MyShopComponent ]
})
export class AppModule { }

Upvotes: 1

Views: 2518

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Inside component template ngFor should use let for defining current iterable variable. Also correct typo from *ngfor to *ngFor with wrapping attribute by "

<p *ngFor="let movie of movieList">{{movie}}</p>

Demo Plunkr

Upvotes: 5

Related Questions