How to Change the Page Title in Angular

In Angular, you can dynamically change the page title for specific components. This can be useful when you want to provide custom titles for different pages or views within your application. The Title service from @angular/platform-browser provides the functionality to update the page title.

Step 1: Import the Title Service

First, you need to import the Title service in your component file. Add the following import statement at the top of your component file:

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

Step 2: Inject the Title Service

Next, inject the Title service into your component’s constructor. Add the following code inside your component class:

constructor(private titleService: Title) { }

Step 3: Set the Page Title

Inside the ngOnInit lifecycle hook of your component, use the setTitle method of the Title service to set the desired page title. Here’s an example:

ngOnInit(): void {
  this.titleService.setTitle('My Custom Page Title');
}

Replace 'My Custom Page Title' with the desired title for your component.

Conclusion

By using the Title service provided by Angular, you can easily change the page title for specific components in your application. This gives you the flexibility to provide custom titles based on your application’s needs.

That’s it! Now you have the knowledge to dynamically change the page title in Angular. Start using this feature to enhance the user experience and provide more context-specific titles in your application.