diff --git a/goldens/public-api/router/index.md b/goldens/public-api/router/index.md index 381158c1b11ed..2036954675c2c 100644 --- a/goldens/public-api/router/index.md +++ b/goldens/public-api/router/index.md @@ -74,7 +74,7 @@ export class ActivatedRouteSnapshot { queryParams: Params; get root(): ActivatedRouteSnapshot; readonly routeConfig: Route | null; - readonly title?: string; + get title(): string | undefined; // (undocumented) toString(): string; url: UrlSegment[]; diff --git a/packages/router/src/router_state.ts b/packages/router/src/router_state.ts index fe9aa108054d0..2efce68fa6534 100644 --- a/packages/router/src/router_state.ts +++ b/packages/router/src/router_state.ts @@ -308,7 +308,11 @@ export class ActivatedRouteSnapshot { _queryParamMap!: ParamMap; /** The resolved route title */ - readonly title?: string = this.data?.[RouteTitleKey]; + get title(): string|undefined { + // Note: This _must_ be a getter because the data is mutated in the resolvers. Title will not be + // available at the time of class instantiation. + return this.data?.[RouteTitleKey]; + } /** @internal */ constructor( diff --git a/packages/router/test/page_title_strategy_spec.ts b/packages/router/test/page_title_strategy_spec.ts index 7f7a0b61cf8db..b0e4e086caeb6 100644 --- a/packages/router/test/page_title_strategy_spec.ts +++ b/packages/router/test/page_title_strategy_spec.ts @@ -9,7 +9,7 @@ import {DOCUMENT} from '@angular/common'; import {Component, Inject, Injectable, NgModule} from '@angular/core'; import {fakeAsync, TestBed, tick} from '@angular/core/testing'; -import {Router, RouterModule, RouterStateSnapshot, TitleStrategy} from '@angular/router'; +import {NavigationEnd, Router, RouterModule, RouterStateSnapshot, TitleStrategy} from '@angular/router'; import {provideRouterForTesting} from '../testing/src/provide_router_for_testing'; @@ -99,6 +99,18 @@ describe('title strategy', () => { tick(); expect(document.title).toBe('resolved title'); })); + + it('can get the title from the ActivatedRouteSnapshot', async () => { + router.resetConfig([ + { + path: 'home', + title: 'My Application', + component: BlankCmp, + }, + ]); + await router.navigateByUrl('home'); + expect(router.routerState.snapshot.root.firstChild!.title).toEqual('My Application'); + }); }); describe('custom strategies', () => {