PageTitle Tutorial in Angular

Introduction

 

The PageTitle is a browser tab name. To understand the concept with an example, please follow the below steps.

 

Step 1

 

Let's create an Angular app with the following command:

 

 

 

Step 2

 

Open the above created project in Visual Studio code and create a service using this command, " ng g s <ServiceName>"

 

 

What is a Service?

 

An Angular service is used once you have created the project framework using the lifetime of an application. The main advantage of service one is that the backend value shares multiple components. 

 

Step 3

 

Create your component following command,"ng g c <YourComponentname >"

 

Step 4

 

Once you create the service file, you can add appmodule.ts with the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

import{TittleServiceService} from './tittle-service.service'
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    TittleServiceService

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

Step 5

 

Let's open the app.routing.ts file and add your created component file and set the route path. Then the title name follows, as shown in the below screenshot.

 

 

Step 6

 

Open the created service and add the following referance file :

import { filter, map, switchMap } from 'rxjs/operators';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';

Platformbrowser

 

This interface is used for routing the associated component loaded into an outlet. It contains information to be used for traversing the router state-free. Bootstrapping is essential for those features.

 

Step 7

• Filter - A Filter operator in the row modifies the Observable that results from the operation of the previous operators.
• Map - Map operator is an applied function of your choosing to each item emitted by a source Observable. It returns the Observable that outputs the results of function applications.
• SwitchMap -The switchMap if for when you need to copy the data into one Observable, but you only need the latest value. Use concatMap if you need to copy the data into one Observable and if the order is important.
• Routing Router - Routing Makes your application SPA. This is for the use of Routing in our application.
• RouterModule - Is a separate module in Angular that provides required services and directives to use routing and navigation in an Angular application.
• Routes - Defines an array of roots that map a path to a component.
• ActivatedRoute - An interface that contains the information about a route associated with a component loaded into an outlet. It can also be used to traverse the router state-free. 
• NavigationEnd - Event trigger navigated successfully.

Step 7

 

Let's add the following code to your service file:

Pagetitle() {

   this.router.events.pipe( filter(event => event instanceof NavigationEnd),
     map(() => this.activeRoute),
     map(route => route.firstChild),
     switchMap(route => route.data),
     map((data) => {
       return data && data.title ? `${data.title}` : this.default_title;
     })
   ).subscribe((current_title) => this.title.setTitle(current_title));
 }

SetTtitle - SetTitle service is a class that provides an API for getting and setting the current HTML document title

 

 

Step 8

 

Open app.component.html and add the below code:

<router-outlet></router-outlet>

Routeroutlet

 

RouterOutlet is a directive provided by Angular which is used to load the different components based on the router state.

 

Whenever the user clicks on the link, the activated component will be rendered and added to HTML DOM inside the router-outlet directive.

 

Step 9

 

Once you are complete with all steps, finally, call the service method in your app.componet.ts file.

 

Whats is ngOnInit?

 

Called once the component initialized

ngOnInit()
{
  this.tittle.Pagetitle();
}

Conclusion

 

In this article, we learned how to set and implement Pagetitle.