Angular @Input is not working with bootstrap component

Question

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?

Community · Accepted Answer · 2017-05-23 11:46:48Z

1

@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.

4 Comments

user2930562 Over a year ago

I'm not sure I understand you correctly. I didn't add input in index.html but app.component.html which declared as templateUrl of AppComponent

Günter Zöchbauer Over a year ago

Why did you add AppDetailComponent to bootstrap: [] then?

user2930562 Over a year ago

Thank you. I did a mistake but I want to know a reason. I try to check javascript file but I found nothing.

Günter Zöchbauer Over a year ago

I don't know what you mean. Angular just doesn't support input in root components and bootstrap is for registering root components. There is no point generating code for something that's not supposed to do anything.

Yoav Schniederman · Accepted Answer · 2017-02-23 10:41:54Z

0

you need to bootstrap only the AppComponent.

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

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

answered Feb 23, 2017 at 10:41

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular @Input is not working with bootstrap component

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related