Introducing Router outlet Input in Angular 19

#webdev #typescript #javascript #angular

In modern frontend frameworks it's common to nest components and share data between them.
Angular provides input binding to pass data from parent to child components. However it only works when the child selector is directly used in the parent template.

Angular 19 introduced, Router outlet Input, a feature available from version 19.0.0-next.0 to pass data directly to components loaded via the router outlet.
With this feature, you can now directly pass data to a routed component, eliminating the need for intermediary services in many cases.

How to use Router outlet Input

Using Router outlet Input is straightforward. Similar to how you pass data to a direct child component using input, you can now pass data to the directive using the new routerOutletData input. Here’s how it works:

Suppose you have an articles signal in your parent component. You can pass it to the router outlet like this:

<router-outlet [routerOutletData]="articles()" />

On the routed component's side, you can access this data using the ROUTER_OUTLET_DATA injection token:

import {ROUTER_OUTLET_DATA} from "@angular/router";

@Component({
 ...
})
export class RoutedComponent {
  data = inject(ROUTER_OUTLET_DATA);
}

The injected data is provided as a Signal<unknown> type. Since Angular doesn’t infer the type, you might want to cast it to the expected type for a better development experience:

import {ROUTER_OUTLET_DATA} from "@angular/router";

@Component({
 ...
})
export class RoutedComponent {
  data = inject(ROUTER_OUTLET_DATA) as Signal<Article[]>;
}

When to use it

Router outlet Input is particularly useful when you need to share data between a parent component and multiple child components routed via the router outlet. Instead of recalculating the same data in each child component, you can compute it once in the parent component and pass it down. This approach not only reduces redundancy but also keeps your child components focused on their specific logic.

For example, imagine you have a list of articles and a sidebar with filters. You can compute the filtered articles in the parent component and pass this data to the router outlet. Each child component can then use this precomputed data in various ways, such as:

Displaying a filtered list of articles
Showing a tag cloud based on the filtered articles
Generating a chart of articles categorized by tags

By updating the filters in the parent component, the new data is reactively updated to the active routed child component. This ensures that your child components always have the latest data without additional computations or service calls.

Conclusion

The introduction of Router Outlet Data Input in Angular 19 is a powerful addition that simplifies data sharing between routed components. By leveraging this feature, you can write more efficient, maintainable, and cleaner Angular applications.

Ready to explore this new feature? Check out the official release notes for more details and start simplifying your Angular apps today!