Dynamic Page Title In Angular 9

Recently while working on Angular 9 project with SharePoint rest API, I came across this requirement where I needed to set the SharePoint List name as page title in Angular 9. We were developing a generic application wherein through Configuration, the entire SharePoint list data would be displayed to the UI. The configuration will hold information which columns from SharePoint needs to be displayed on UI, LIST name etc. It’s been a generic application, we just have to tune the Configuration file & it would start working for any SharePoint list. As my Anguar application depends on this file setting, so even before my Angular application starts I need to load this configuration file.

I’d used APP_INITIALIZER for my application to seed the configuration file.

We set the page title in index.html file inside the head section of our html page, which is not where our Angular is instantiated.

<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

Our Angular scope starts as soon as our AppComponent is instantiated which is declared as an element inside the Body section of our index.html page with selector <app-root>

<body>
<app-root></app-root>
</body>

There are various scenarios wherein you could come across this scenario of dynamically setting the page title. Some of the examples would be change the page title on click of link on page, or you’re getting some configuration/page settings from some external api call etc.

How can we set the page title dynamically? For handling this scenario Angular provides us with a Title service – which helps us to get or set the page title. This service just provides two methods; i.e. setting the page Title & getting the page Title. Title service is a part of @angular/platform-browser package. Since Title is a service we’ll have to import it as a Provider inside our app.module.ts file.

For demonstration purposes of this article, we would consider the page title is coming from configuration file which is under the assets folder within our application. Here is the code snippet of our app-config.json file. For simplicity sake I’m just having one setting, in your real application you could have many more settings inside your configuration file.

{
"settings": [{
"key": "PAGE_TITLE",
"value": "DYNAMIC PAGE TITLE"
}]
}

For a strong typing experience I’ve defined one model for our app-config.json file. Here is the code snippet for Config.model.ts

export class Config {
settings: ISettings[];
}
export interface ISettings {
key: string;
value: string;
}

I’ve defined one AppConfig.service.ts file which reads the configuration from our app-config.json file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { Config } from '../models/config.model';
@Injectable()
export class AppConfigService {
readonly appConfiguration$: Observable<Config>;
private appConfiguration: BehaviorSubject<Config>;
constructor(private http: HttpClient) {
this.appConfiguration = new BehaviorSubject({} as Config);
this.appConfiguration$ = this.appConfiguration.asObservable();
}
public getAppConfig(): Observable<Config> {
return Observable.create((observer) => {
this.http.get<Config>('/assets/app-config.json').subscribe((response) => {
this.appConfiguration.next(response);
return observer.next(response);
});
});
}
}

As my application needs this configuration file, I have to load this file inside our APP_INITIALIZER. Here is the code snippet for the same.

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { AppConfigService } from './services/app-config.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule
],
providers: [
Title,
AppConfigService,
{
provide: APP_INITIALIZER,
useFactory: (appConfigSvc: AppConfigService, titleService: Title) => {
return () => {
return appConfigSvc.getAppConfig().subscribe((response) => {
titleService.setTitle(response.settings.find(x => x.key == 'PAGE_TITLE').value);
});
}
},
multi: true,
deps: [AppConfigService, Title]
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

NOTE

If you need to reset the pageTitle on click of a link, you could simply use the below code snippet.

titlService.setTitle(‘Your new title goes here’);

Here is the snapshot of our working demo.