Angular : router-outlet and its events

This section will mainly focus on the events supported by router outlet in Angular. So, it is assumed that you are already familiar with the Angular routing and its working. Let’s start with a little brief about ‘Router-outlet’.

Router-outlet in angular acts as a placeholder that let the user to load the components dynamically based on the current route state.

Syntax :
<router-outlet> </router-outlet>

The router outlet selector enables as soon as you enable routing in your application i.e., you need to import ‘Router Module’ in ‘App Module’.

It offers some in-built properties that can come in handy sometimes. Following are the properties provided by router-outlet :

1. /@Output(‘activate’)
2. /@Output(‘deactivate’)
3. isActivated
4. component
5. activatedRoute
6. activatedRouteData

So, there are mainly two most important events offered by router-outlet.

Activate — it emits when some component initiated.
Deactivate — it emits when some component destroyed.

One use case of ‘activate’ event is that you can set property of a component from its parent component dynamically & conditionally. Let’s say there is a child component that renders through ‘router-outlet’ of ‘app-component’ and you need to set some of its properties specified in ‘app-component’, so you can make use of ‘activate’ event to do so.

Child component

Accessing property from parent component

In case you need to see code in action, Please refer to this GitHub link.

That’s all for this section.

In case you like it, Please share it with your friends and hit ❤️. Feel free to comment if you want to share or discuss more on this.