EntryComponent of Angular -
Stayed
Informed - What Are Components in Angular 5,4 and 2?
The entry component
is used to define components and created dynamically using the
ComponentFactoryResolver.
Firstly,
Angular creates a component factory for each of the bootstrap components with
the help of ComponentFactoryResolver. And then, at run-time, it will use the
factories to instantiate the components.
You specify
an entry component by bootstrapping in the Angular module or you specify an entry
component by routing definition.
All other
root components should be listed in the declarations array.
const routes:
Routes = [
{ path: '',
redirectTo: 'home',
pathMatch: 'full'},
{ path: 'login',
component: LoginComponent },
{ path: 'dashboard',
component: DasboardComponent },
{ path: '**',
redirectTo: 'home' }
];
There are two
main kinds of entry components which are following -
1. The
bootstrapped root component
2. A
component you specify in a route
The
bootstrapped entry component -
A
bootstrapped component is an entry component that Angular loads into DOM at the
application launch and the other root components loaded dynamically into entry
components.
The angular
loads a root dynamically because it is bootstrapped in the Angular Module. In
the below example, AppComponent is a root component so that angular loads dynamically.
Example –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent] // bootstrapped entry component
})
export class AppModule { }
A
Routed entry component -
All router
components must be entry components because the component would require you to
add in two places.
1. Router
and
2. EntryComponents
The Angular compiler
is so smarter and it is recognizing that this is a router component and it
automatically added router components into entry components.
The route
definition refers to components by its type i.e.
1. LoginComponent
2. DasboardComponent
There are two
components one is Login and another one is Dashboard. These components have the
ability to navigate between the login and dashboard views if passed the authentication
and authorization of this app.
Example -
const routes:
Routes = [
{ path: '',
redirectTo: 'home',
pathMatch: 'full'},
{ path: 'login',
component: LoginComponent },
{ path: 'dashboard
', component: DasboardComponent
},
{ path: '**',
redirectTo: 'home' }
];
I hope you enjoyed this post. So please write your thoughts in the below comment box. Thank you so much for reading this post.
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|