What's new in @this-dot@route-config v1.2
Tags: angular, typescript, news, webdev
Published: 2021-11-05 11:49:32

Recently, we introduced our first [open source library](https://www.npmjs.com/package/@this-dot/route-config) 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](https://www.thisdot.co/blog/introducing-our-first-open-source-library-this-dot-route-config).

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.

```html
<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.

```ts
@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.

```html
<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](https://www.thisdot.co/blog/introducing-our-first-open-source-library-this-dot-route-config). 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.

```html
<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.

```ts
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](https://github.com/thisdot/open-source).

If you want to play with the new features, please have a go at this [Stackblitz example](https://stackblitz.com/edit/route-config-showcase).

In case you have any questions, you can always tweet or DM me at [@ktrz](https://twitter.com/ktrz__). I'm always happy to help!

---

_This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies._

_We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more._