Angular : Changing Page title Dynamically

#angular #javascript #webdev #programming

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

Preview

You can click on below link in new tab of your browser and you can see the title will be dynamic one
https://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 https://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.