DEV Community 👩‍💻👨‍💻

Cover image for Angular : Changing Page title Dynamically
RajeshKumarYadav.com
RajeshKumarYadav.com

Posted on • Updated on

Angular : Changing Page title Dynamically

Step 1. First we need to import Title service -

import {Title} from "@angular/platform-browser";
Enter fullscreen mode Exit fullscreen mode

Step 2. Using setTitle -

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

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');
 }
}
Enter fullscreen mode Exit fullscreen mode

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.

Buy Me A Coffee

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.

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

 
🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content