Set Page Title In Angular

The Code Points
0

Set Page Title In Angular

The Code Points 0

In this article, we use an example to demonstrate how to set the page title in Angular projects using the title service. We may easily update the application's HTML title thanks to the title service.

Why Change Page Title

Changing the page title is crucial since it enables search engines to understand the page's purpose and properly index it. Users can also benefit from knowing which page they are on.

Since Angular is a single-page application, the page does not reload entirely. At first, the page merely loads once. When you switch between routes, only a portion of the page loads.

The index.html file contains the title of the page, as displayed below. The title of the application is set using the HTML title tag. All other pages or routes receive the same title because it only loads at the beginning.

<html lang="en">
<head>
  <meta charset="utf-8"></meta>
  <title>Title Service Example</title>
  <base href="/"></base>
  <meta content="width=device-width, initial-scale=1" name="viewport"></meta>
  <link href="favicon.ico" rel="icon" type="image/x-icon"></link>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Title Service in Angular

To update the document title, we can use the title service in Angular.

How to Use Title Service

Import it to Angular Module

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

Keep in mind that the platform-browser package includes the title service. i.e. because the HTML page in the browser can use the title meta tag.

You require a different service if your mobile apps run on any other platform, such as NativeScript. the service that is aware of the platform.

Register the service with DI Providers

The title service must be registered with the Angular Providers in the root Angular module, just like all other Angular services.

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
  ],
  providers: [
    Title                   //Register the Service
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inject Title service in the component

Utilizing Dependency Injection, include the title service in the component along with all other Angular Services.

export class TitleComponent implements OnInit {
  constructor(private title:Title) { }
}

The title service offers just two approaches. Set and get titles. To change the page's title and to determine its current title, we use SetTitle and GetTitle, respectively.

Use the setTitle method to set the title

ngOnInit() {
   this.title.setTitle("How to use title service in Angular")
}

Title service example

The example app, which consists of three parts, is shown below. The title of each component is specified using the setTitle method of the Title service.

Add the following code under the app.module.ts:

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './one.component';
import { TwoComponent } from './two-component';
import { ThreeComponent } from './three.component';
 
@NgModule({
  declarations: [
    AppComponent,OneComponent,TwoComponent,ThreeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [Title],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the following code under the app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OneComponent } from './one.component';
import { TwoComponent } from './two-component';
import { ThreeComponent } from './three.component';
 
 
const routes: Routes = [
  {path: 'one', component:OneComponent},
  {path: 'two', component:TwoComponent},
  {path: 'three', component:ThreeComponent},
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Add the following code under the app.component.ts:

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'title Service Example';
 
  constructor(private titleService:Title) {
  }
 
  ngOnInit() {
    this.titleService.setTitle(this.title);
  }
}

Add the following code under the app.component.html:

<h1>Angular Title Service Example</h1>
 
<ul>
  <li><a one="" routerlink="">One</a> </li>
  <li><a routerlink="" two="">two</a> </li>
  <li><a routerlink="" three="">three</a> </li>
</ul>
 
<router-outlet></router-outlet>

Add the following code under the one.component.ts:

@Component({
  template: `<h1>One Component</h1>`
})
export class OneComponent implements OnInit {
  title = 'One Component Title';
 
  constructor(private titleService:Title){
  }
 
  ngOnInit() {
    this.titleService.setTitle(this.title);
  }
 
}

Add the following code under the two.component.ts:

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
 
@Component({
  template: `<h1>Two Component</h1>`
})
export class TwoComponent implements OnInit {
  title = 'Two Component Title';
 
  constructor(private titleService:Title) {
  }
 
  ngOnInit() {
    this.titleService.setTitle(this.title);
  }
 
}

Add the following code under the three.component.ts:

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
 
@Component({
  template: `<h1>Three Component</h1>`
})
export class ThreeComponent implements OnInit {
  title = 'Three Component Title';
 
  constructor(private titleService:Title){}
 
  ngOnInit() {
    this.titleService.setTitle(this.title);
  }
}

Conclusion

We learned how to use Angular's Title service.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.
Tags:

Post a Comment

Previous Post Next Post