Angular Router Outlet

Angular Router has Angular routes, which is an array of route configurations. Each Angular router has the Angular routes, which have the following properties:

path is a string that uses the route matcher DSL.
pathMatch is a string that specifies the matching strategy.
matcher defines a custom strategy for path matching and supersedes path and pathMatch.
component is a component type.
redirectTo is the url fragment which will replace the current matched segment.
outlet is the name of the outlet the component should be placed into.
canActivate is an array of DI tokens used to look up CanActivate handlers.
canActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
canDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
canLoad is an array of DI tokens used to look up CanLoad handlers.
data is additional data provided to the component via ActivatedRoute.
resolve is a map of DI tokens used to look up data resolvers.
runGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. When set to paramsOrQueryParamsChange they will also run when query params change. And when set to always, they will run every time.
children is an array of child route definitions.
loadChildren is a reference to lazy loaded child routes.

 

Overview
@Directive({ selector: ‘router-outlet’, exportAs: ‘outlet’ })
class RouterOutlet implements OnDestroy, OnInit {
activateEvents: new EventEmitter<any>()
deactivateEvents: new EventEmitter<any>()
ngOnDestroy(): void
ngOnInit(): void
get isActivated: boolean
get component: Object
get activatedRoute: ActivatedRoute
get activatedRouteData
detach(): ComponentRef<any>
attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
deactivate(): void
activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null)
}

How To Use
<router-outlet></router-outlet>
<router-outlet name=’left’></router-outlet>
<router-outlet name=’right’></router-outlet>

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.
<router-outlet
(activate)=’onActivate($event)’
(deactivate)=’onDeactivate($event)’></router-outlet>

Selectors
router-outlet

Outputs
activate bound to RouterOutlet.activateEvents
deactivate bound to RouterOutlet.deactivateEvents
Exported as
outlet

Constructor
constructor(parentContexts: ChildrenOutletContexts, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string, changeDetector: ChangeDetectorRef)

Members
activateEvents: new EventEmitter<any>()
deactivateEvents: new EventEmitter<any>()
ngOnDestroy(): void
ngOnInit(): void
get isActivated: boolean
get component: Object
get activatedRoute: ActivatedRoute
get activatedRouteData
detach(): ComponentRef<any>
Called when the RouteReuseStrategy instructs to detach the subtree

attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
Called when the RouteReuseStrategy instructs to re-attach a previously detached subtree

deactivate(): void

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null)

 

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

 

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page