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:
 
 
PageTitle In Angular
 
Step 2
 
Open the above created project in Visual Studio code and create a service using this command, " ng g s <ServiceName>"
 
PageTitle In Angular
 
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:
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { LoginComponent } from './login/login.component';  
  6. import { RegisterComponent } from './register/register.component';  
  7.   
  8. import{TittleServiceService} from './tittle-service.service'  
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent,  
  12.     LoginComponent,  
  13.     RegisterComponent  
  14.   ],  
  15.   imports: [  
  16.     BrowserModule,  
  17.     AppRoutingModule  
  18.   ],  
  19.   providers: [  
  20.     TittleServiceService  
  21.   
  22.   ],  
  23.   bootstrap: [AppComponent]  
  24. })  
  25. export class AppModule { }  
 
PageTitle In Angular
 
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.
 
PageTitle In Angular
 
Step 6
 
Open the created service and add the following referance file :
  1. import { filter, map, switchMap } from 'rxjs/operators';  
  2. import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';  
  3. 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:
  1. Pagetitle() {  
  2.     
  3.    this.router.events.pipe( filter(event => event instanceof NavigationEnd),  
  4.      map(() => this.activeRoute),  
  5.      map(route => route.firstChild),  
  6.      switchMap(route => route.data),  
  7.      map((data) => {  
  8.        return data && data.title ? `${data.title}` : this.default_title;  
  9.      })  
  10.    ).subscribe((current_title) => this.title.setTitle(current_title));  
  11.  }  
SetTtitle - SetTitle service is a class that provides an API for getting and setting the current HTML document title
 
PageTitle In Angular
 
Step 8
 
Open app.component.html and add the below code:
  1. <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
  1. ngOnInit()  
  2. {    
  3.   this.tittle.Pagetitle();  
  4. }   

Conclusion

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