I have 3 root components that get bootstrapped by the root AppModule
.
How do you go about specifying an @Input()
parameter to one of those components?
Neither
<app-modal [id]="'hard-coded value'"></app-modal>
<app-modal [id]="constantExportedByAppmodule"></app-modal>
are picked up by AppModalComponent
:
@Input() id: string;
It is undefined.
html file you must specify the root component using it's selector (usually app-root ).
A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.
A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .
bootstrap — the root component that Angular creates and inserts into the index.
As far as I know, you can not pass @Input() to a bootstraped component.
But you can use another way to do that - pass the value as an attribute.
index.html :
<my-app myAttribute="myAttributeValue">
<div>Loading...</div>
</my-app>
app.component.ts :
@Component({
selector: 'my-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
constructor(private elementRef:ElementRef) {
let myAttribute = this.elementRef.nativeElement.getAttribute('myAttribute');
}
}
As @Grégory Gossart said you can not pass @Input data as normal for bootstraped components.
It is because an @Input is expected to come from an angular component. So, If your root app is loaded/bootstraped directly in the HTML it has not reference of what Is gonna provide that @Input, I thought.
As good practice commented on many Angular docs, and probably because it specific behaviours, you should only bootstrap one root App. I think your option here is add a root app which you bootstrap and it imports your others(3) and use those as template in it. Then pass the @Input as normal. Really nothing special.
I think another option could be pass the data from an @Injectable to your root apps if you decide you need to bootstrap all them and need external data. But I feel it is more refered to specific purposes.
Edit: I took a time to find this blog I have read past day and reason why I said about @Injectable. So merits to the author, but interesting stuff. Providing external data when bootstrapping Angular 2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With