[SOLVED] Angular @Input is not working with bootstrap component

Angular @Input is not working with bootstrap component

I did a mistake in my Angular2 class and I've not clearly understood about @Input.

I created 2 components AppComponent and AppDetailComponent.

In AppDetailComponent :

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


@Component ({
selector: 'app-detail',
template: 'Hi {{datainput}}'
})

export class AppDetailComponent {

@Input()
datainput: string;

}

and in AppComponent template :

<h1>
  {{title}}
</h1>
<app-detail [datainput]="'test'"></app-detail>

and in App Module I made a mistake by add AppDetailComponent as bootstrap component

import { AppComponent } from './app.component';
import { AppDetailComponent } from './app-detail.component';

@NgModule({
  declarations: [
    AppComponent, AppDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent, AppDetailComponent]
})
export class AppModule { }

After I removed AppDetailComponent from the bootstrap list, program was working correctly.

I don't understand why @input dose not working when I use it as bootstrap component?

Will Angular always ignore input property in spite of I send the input from an other angular component?

Solution

@Inputs() can only be bound in templates of a component. Bootstrapped component are in index.html outside of any other component and therefore there it's not possible to bind to inputs.