Angular module is having bootstrap array. Over here my question why it is an array as we only one component to bootstrap is there any example why we are using two or more component in a bootstrap array. As i dont have any idea about it? Can any body have answer for this?
is there any use case of having more than one bootstrap component. if anyone can give me an example for same. where to use this ?
Earlier there was the only method for bootstrap where you can pass one Root Component which is being rendered in DOM along with dependencies used.
But after Angular v5 concept of a bootstrap array comes under light, from official Docs -
The application launches by bootstrapping the root AppModule, which is also referred to as an entryComponent. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.
Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.
While you can put more than one component tree on a host web page, most applications have only one component tree and bootstrap a single root component.
This one root component is usually called AppComponent and is in the root module's bootstrap array.
That means -
You can provide more than one component at the time of bootstrapping your application like below -
@NgModule({
declarations: [
....
bootstrap: [AppComponent, TestComponent]
});
So this will create two root level components in your DOM as shown in the image below -
I don't personally feel of using such scenario but yes this exists in case someone needed.
Now, in Angular v7(+), New lifecycle hook has been added which is ngDoBootstrap().
For more details - https://angular.io/api/core/DoBootstrap