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

I don't see any issue, I tried this in this Plunker! and it works.

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h3>Angular 2 First Item in Array Missing using *ngFor</h3>
     <pre>{{teachers | json}}</pre>
    <teacher *ngFor="let t of teachers; let i = index" [teacherName]="t" [index]="i"></teacher>
  `
})
export class AppComponent {
   public teachers: string[] = [
        "Erty",
        "Dave",
        "Sarah",
        "Walter"
    ];
}

@Component({
    selector: 'teacher',
    template: `
        <p>Teacher {{index}}: {{teacherName}}</p>
    `
})
export class TeacherComponent {
    @Input() teacherName: string;
    @Input() index: number;

    ngOnInit() {
        console.log(this.teacherName);
    }
}

Answer 2

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