Angular: create a configurable website title based on build environment

2 min readDec 8, 2020

This short post is part of a series, where I share quick tips on how to do web dev stuff that I’ve struggled with, but eventually figured out. My goal is to help you discover this easier than I did.

Use case

Let’s say you have a web app that you want to offer to more than one client. Functionally, it’ll be the same for every new client, but the styling needs to be adjusted based on your client’s branding. Changing the styling is a matter of substituting one SCSS file with another at build time, so this is not something I’ll go into here.

What’s a bit more tricky is changing the website title depending on the specific client (every client would have a different name).

Problem

The problem here is that you can’t just do dynamic data binding inside the <title> tags, since the tag lies inside the <head> tags and not in the <body> tags, where that magic happens.

Solution

The solution consists of two parts. The first one is using a native Angular service called Title.

So, inside your app.component.ts file add:

constructor(private titleService: Title){}

Normally, you’d then have to add the following function:

setTitle(newTitle: string) {   
  this.titleService.setTitle(newTitle);   
}

And call it with the appropriate parameter (e.g. setTitle (“Title”)). However, remember we want the title to be displayed dynamically, so we want to use the value inside that translations JSON file.

{
  "newTitle": "Title of the website"
}

To reference a translation inside a .ts file you need to first define

private translate: TranslateService

, and then add

this.translate.get(‘newTitle’)

wherever you need it. Bear in mind, the value inside the brackets needs to be the same as the entry in your JSON.

However, there’s another problem here —

“this.translate.get returns an Observable and the “this.titleService.setTitle()” needs a string.

You needs to use .subscribe() to access the value in an Observable, but then you’ll have a Subscriber, which is again — not a string. So, you’ll then have to use JSON.stringify to read the value.

Sounds funky, but in the end it’ll look like this:

setTitle() {
  this.translate.get('newTitle').subscribe(res =>
  this.titleService.setTitle(JSON.stringify(res)));
}ngOnInit() {
  this.setTitle();
}

Edit: Small correction. If you do it like that, you’ll have your website title in quotes (e.g. “You title”). You can do it properly by putting “(res: string) => this.titleService.setTitle(res)” inside the subscribe function.

And there you have it. Now, you just need to create two identical JSON files inside your “translations” folder, where the value of “newTitle” differs according to the client you’re building the app for.

In your script, where you define which files will be used at runtime choose the JSON that will be switched with the other JSON.

That way, when after the build the appropriate JSON will be loaded for each client and the correct value will be taken for the <title>.

Hope this was helpful! If you have any questions, feel free to leave a comment.

Angular: create a configurable website title based on build environment

Use case

Problem

Solution

Written by Rumen Manev