feat(router-store): add new selectRouteDataParam selector (#3673) (#3686

)

Closes #3673

modules/router-store/spec/router_selectors.spec.ts

@@ -227,6 +227,14 @@ describe('Router State Selectors', () => {
       );
     });
 
+    it('should create a selector for selecting a specific route data param', () => {
+      const result = selectors.selectRouteDataParam('testData')(state);
+
+      expect(result).toEqual(
+        state.router.state.root.firstChild.firstChild.data.testData
+      );
+    });
+
     it('should create a selector for selecting the url', () => {
       const result = selectors.selectUrl(state);
 

modules/router-store/src/models.ts

@@ -9,6 +9,9 @@ export interface RouterStateSelectors<V> {
   selectRouteParams: MemoizedSelector<V, Params>;
   selectRouteParam: (param: string) => MemoizedSelector<V, string | undefined>;
   selectRouteData: MemoizedSelector<V, Data>;
+  selectRouteDataParam: (
+    param: string
+  ) => MemoizedSelector<V, string | undefined>;
   selectUrl: MemoizedSelector<V, string>;
   selectTitle: MemoizedSelector<V, string | undefined>;
 }

modules/router-store/src/router_selectors.ts

@@ -54,6 +54,8 @@ export function getSelectors<V extends Record<string, any>>(
     selectCurrentRoute,
     (route) => route && route.data
   );
+  const selectRouteDataParam = (param: string) =>
+    createSelector(selectRouteData, (data) => data && data[param]);
   const selectUrl = createSelector(
     selectRouterState,
     (routerState) => routerState && routerState.url
@@ -75,6 +77,7 @@ export function getSelectors<V extends Record<string, any>>(
     selectRouteParams,
     selectRouteParam,
     selectRouteData,
+    selectRouteDataParam,
     selectUrl,
     selectTitle,
   };

projects/ngrx.io/content/examples/router-store-selectors/src/app/router.selectors.ts

@@ -6,14 +6,15 @@ import { getSelectors, RouterReducerState } from '@ngrx/router-store';
 // export const selectRouter = createFeatureSelector<RouterReducerState>('yourFeatureName');
 
 export const {
-  selectCurrentRoute, // select the current route
-  selectFragment, // select the current route fragment
-  selectQueryParams, // select the current route query params
-  selectQueryParam, // factory function to select a query param
-  selectRouteParams, // select the current route params
-  selectRouteParam, // factory function to select a route param
-  selectRouteData, // select the current route data
-  selectUrl, // select the current url
-  selectTitle, // Select the title if available
+    selectCurrentRoute, // select the current route
+    selectFragment, // select the current route fragment
+    selectQueryParams, // select the current route query params
+    selectQueryParam, // factory function to select a query param
+    selectRouteParams, // select the current route params
+    selectRouteParam, // factory function to select a route param
+    selectRouteData, // select the current route data
+    selectRouteDataParam, // factory function to select a route data param
+    selectUrl, // select the current url
+    selectTitle, // select the title if available
 } = getSelectors();
 // #enddocregion routerSelectors