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.
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.