Set Page Title Using Title Service Angular Example

This tutorial explains how to set the page title using the title service in Angular apps using an example. The title service allows us the change the HTML title of the application with ease.

Why change the page title

Changing the page title is very important as it helps search engines to know the purpose of the page and index it properly. It also helps users to know, which page they are in.

Being a single-page app, the angular does not reload the entire page. The page loads only once at the startup. Only part of the page gets loaded when you navigate from one route to another.

The title of the page is set in the index.html as shown below. We use the HTML title tag to set the title of the app. Since it is loaded only at the start, all other pages or routes get the same title.

Title Service in Angular

We can make use of the title service in angular to make changes to the document title

How to Use Title Service

Import it in the Angular Module

Note that the title service is part of the platform-browser package. i.e because the title meta tag is applicable to the HTML page in the browser.

If you are using any other platform like NativeScript for mobile apps, you need a different service. The service, which understands the platform.

Register the service with DI Providers

Like all other Angular services, we need to register the title service with the Angular Providers in the root Angular module.

Inject Title service in the component

Inject the title service, like all other Angular Services in the component using Dependency Injection

The title service provides only two methods. SetTitle & GetTitle. We use SetTitle to set the title of the page and GetTitle to find out the current title of the page.

Use the setTitle method to set the title

That’s it.

Title service example

The following is the example app, which has three components. Each component uses the setTitle method of the Title service to set the title of each component.








Angular Title Service Example




We learned how to make use of the Title service in Angular

8 thoughts on “Set Page Title Using Title Service Angular Example”

  1. Straight forward tutorials, excellent examples
    I really like this one also wanted to know how to master angular, what is the edge of it you know …
    After spending weeks, all I found was learning rxjs and basic concepts and yet I see tutorials like this … 🙂

  2. This is a very nice tutorial. The examples are clear, and they work as advertised. Thank you for taking the time to post it!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top