RFC NgRxTitleStrategy

[david-shortman]

Link to blog post explaining feature- https://dev.to/davidshortman/how-to-use-dynamic-titles-from-ngrx-selectors-1f0

Angular 14 introduced the ability to set a static title per route. In a reactive application using NgRx, developers may want the flexibility to have dynamic titles driven by the global state.

With an NgRxTitleStrategy, string selectors could be composed into titles:

{  // route
  title: ngrxTitle`${selectSomeDynamicTitle}`
}

In the app module, one could use provideNgRxTitleStrategy to initialize this behavior

providers: [provideNgRxTitleStrategy()]

This API remains small but powerfully enables titles to be based on page content/ change over time.

[david-shortman]

Here's a Stackblitz demoing the title: https://stackblitz.com/edit/angular-ivy-pbyvne?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp-routing.module.ts

Given a base route like

  {
    path: '',
    component: AppComponent,
    title: ngRxTitle`${counterFeature.selectCount} Seconds Since ${counterFeature.selectEvent}`
  },

Then the following title is produced:

[david-shortman]

As an aside, the new selectTitle selector from @ngrx/router-store does not update when updateTitle is invoked from a custom title strategy:

Seen in the app component:

@Component({
  selector: 'app-root',
  template: `Title selected from router store is: {{ title$ | async }}
    <br /><br />
    <button (click)="logTitle()">console.log current title</button>`,
})
export class AppComponent {
  constructor(private readonly store: Store) {}

  title$ = this.store.select(getSelectors().selectTitle);

  logTitle() {
    console.log(window.document.title);
  }
}

[david-shortman]

If an NgRxTitleStrategy were implemented, it could guarantee that the router store title was up-to-date by dispatching an action when the title changed.

[timdeschryver]

Hey David, smart usage of the title strategy! It's something that I didn't think of until reading your blog post. For now, I think this is very specific to one use-case, and I don't know how useful this would be for the majority. Therefore, I would suggest not including it into the NgRx repo, but this is something that we could revisit later.