Step 1. First we need to import Title service -

import {Title} from "@angular/platform-browser";

Step 2. Using setTitle -

 constructor( private title: Title) {
 this.title.setTitle('page title changed');
 }

All together -

import {Title} from "@angular/platform-browser";
@Component({
 selector: 'app',
 templateUrl: './app.component.html',
 providers : [Title]
})
export class AppComponent implements {
 constructor( private title: Title) {
 this.title.setTitle('page title changed');
 }
}

Demo

{% stackblitz angular-ivy-5rbcrh file=src%2Fapp%2Fapp.component.ts %}

Preview

You can click on below link in new tab of your browser and you can see the title will be dynamic one angular-ivy-5rbcrh.stackblitz.io

Use case

You can think of an application which has content dynamically updated after some interval and you want to update the title based on updated content, for example time.is/UTC this website has dynamic title, as this will show the current UTC time. This is just a simple example, you can use this to your upcoming projects.

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.