angular-cli: Error during data binding <> @Input property is null

I've read every single forum about this but still can't get this to work. I have 1 parent component and want to load a few child components within (passing different input params for each one).

My application is setup the following way:

• my app.component will have 3 sub-components: Header, Content (which I haven't even implemented yet) & Footer;
• there's another component I need repeating in my Header component, so I created a Child component (only to be used within the Header component);

Below is ALL MY CODE:

---

app.module.ts

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ChildComponent } from './child/child.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [

  ],
  bootstrap: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ChildComponent
  ]
})

export class AppModule { }

---

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
  <header class="container-fluid">
    <app-header></app-header>
  </header>

  <content class="container-fluid">
  </content>

  <footer class="container-fluid">
    <app-footer></app-footer>
  </footer>`
})

export class AppComponent { }

---

header.component.ts

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

@Component({
  selector: 'app-header',
  template: `
  <div>
    <h2>HEADER</h2>
    <app-child [code]="'1st value'"></app-child><br>
    <app-child [code]="'2nd value'"></app-child><br>
    <app-child [code]="'3rd value'"></app-child>
  </div>`
})

export class HeaderComponent { }

---

footer.component.ts

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

@Component({
  selector: 'app-footer',
  template: `<div><h2>FOOTER</h2></div>`
})

export class FooterComponent { }

---

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<div>Hello World! {{this.code}}</div>`
})

export class ChildComponent {
    @Input() code: string;
}

---

But for some reason, the Binding DOESN'T work for the first child component. The output is:

Hello World!
Hello World! 2nd value
Hello World! 3rd value

To make matters more confusing, If I remove my footer component, this works... yet the footer component is not related in any way to my header component or its child component.

Can someone help me figure out why the heck this only fails for the 1st occurrence but then works fine for all other bindings?

Angular properties:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.1
node: 6.10.0
os: win32 x64
@angular/animations: 4.2.6
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/compiler-cli: 4.2.6
@angular/core: 4.2.6
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/platform-server: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.2.1
@angular/language-service: 4.2.6

Thanks in advance for any help.

I copied your code, but could not reproduce the error you specified. Can you please check if there is anything else you are missing.