What's New in @this-dot@route-config v1.2

Recently, we introduced our first open source library to have easier access to RouterModule config's data property. If you haven't read about it yet, I recommend reading my colleague’s introductory blog post.

Since the first release, we received great feedback from the community, and we've been working on improving the developer experience using it. In this article, I'd like to share with you the new features we've introduced, and how to use them.

RouteDataDirective (*tdRouteData)

One of the new features we've introduced is a directive for directly accessing the current route data property from within the component's template. This is a structural directive that binds the whole data property to the local variable we define. To use it, we need to add a *tdRouteData directive attribute to a tag that we want in order to use some route's defined properties.

<div *tdRouteData="let routeData">
  <h1>{{ routeData.pageTitle }}</h1>
</div>

In the routeData, we have access to the whole data property (along with all the properties from the data properties defined in parent routes).

Given the following router configuration, we will display the correct title depending on the subpage we're currently on.

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: Example1Component,
        children: [
          {
            path: 'first',
            component: FirstComponent,
            data: {
              title: ['First component'],
            },
          },
          {
            path: 'second',
            component: SecondComponent,
            data: {
              title: ['Second component'],
            },
          },
          {
            path: '**',
            pathMatch: 'full',
            redirectTo: 'first',
          },
        ],
      },
    ]),
  ],
})
export class Example1Module {}

If you need to use multiple route properties within one component's template, it is recommended to only use *tdRouteData on one root tag (or ng-container in case your template doesn't have one top-level element). This way we only create one subscription to route's data per template.

<ng-container *tdRouteData="let routeData">
  <h1>{{ routeData.pageTitle }}</h1>
  <ul *ngFor="let item of routeData.someRouteItems">
    <li>{{ item }}</li>
  </ul>
</ng-container>

RouteDataHasDirective (*tdRouteDataHas)

The second new feature we've introduced is a directive similar to *tdRouteTags directive we've already shown in the previous article. The big difference is more configuration options. The new *tdRouteDataHas directive allows the developer to configure the property that this directive is using to determine which template to show. We can configure this via the tdRouteDataHasPropName input (or just propName using shorthand syntax). Let's see it in action.

<p *tdRouteDataHas="'showParagraphTag'; propName: 'customRouteTagsProp';">
  Go to first
</p>

Given the following router configuration, we will display the paragraph only on the first route, and not on the second route.

RouterModule.forChild([
  {
    path: '',
    component: Example2Component,
    children: [
      {
        path: 'first',
        component: FirstComponent,
        data: {
          customRouteTagsProp: ['showParagraphTag'],
        },
      },
      {
        path: 'second',
        component: SecondComponent,
        data: {
          customRouteTagsProp: [],
        },
      },
      {
        path: '**',
        pathMatch: 'full',
        redirectTo: 'first',
      },
    ],
  },
]);

Summary

This concludes the new features we've added since the first release. I would like to thank all the people that provided us with suggestions for those features! We're constantly looking for ways to improve our libraries, and encourage you to let us know about any questions or feature requests via an issue on our repository.

If you want to play with the new features, please have a go at this Stackblitz example.

In case you have any questions, you can always tweet or DM me at @ktrz. I'm always happy to help!