Angular 2 First Item in Array Missing using *ngFor

Question

Using the angular quickstart app (https://github.com/angular/quickstart/blob/master/README.md). Using angular 2.1.1

Using *ngFor, the first item of the list doesn\'t app

Answer 1

The issue is that you are Bootstrapping TeacherComponent in your app.module and it being treated as an entry component which makes the first render break for our purposes.

This change will make it render properly:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { TeacherComponent } from './teacher.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [TeacherComponent, AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And here's some reading on what to bootstrap https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-bootstrap_vs_entry_component