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

Question

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.

score 0 · Accepted Answer · answered Jul 17 '17 at 11:39

0

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

answered Jul 17 '17 at 11:39

Sachin Gupta

4,981
3
16
32

Sachin, thanks for getting back to me. You're right... the code I sent will work. I was trying to avoid writing down so much code here but I've now edited my initial question and added all my code for your consideration. Please let me know if you can make some sense of this. Thanks – john.acb Jul 18 '17 at 03:24
When you bootstrap the ChildComponent class, Angular will look for the tag and instantiate it, this removes the value that you have sent to it via the HeaderComponent. ( Angular does it only for first match ). If you use console.log(this.code) in ngOnInit of ChildComponent, you will notice that the 3 values you passed, appear twice and then 1 undefined. – Sachin Gupta Jul 18 '17 at 11:06
Hi @john.acb . Angular does the bootstrapping in order defined in bootstrap array. To fix this, you can remove all components from bootstrap except AppComponent, or keep ChildComponent before the HeaderComponent if you need to use and somehwere in index.html. – Sachin Gupta Jul 18 '17 at 11:15
Saschin... thank you so much... it was in fact the way I was bootstrapping the application. Thanks so much – john.acb Jul 18 '17 at 13:52

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

1 Answers1