I want to change the title of the page whenever I click or browse the link from the URL bar. How to change that using Angular route? I am using angular version 4 and angular cli.
I want to change the title of the page whenever I click or browse the link from the URL bar. How to change that using Angular route? I am using angular version 4 and angular cli.
You can to use @angular/plateform-browser to use the setTitle():
import { Title } from '@angular/platform-browser';
@Component({
selector: 'your-component',
})
export class YourComponent implements onInit {
constructor(private title: Title) {}
ngOnInit() {
this.title.setTitle('Title for this component');
}
}
I have tried with following way with few lines of code, hope it will help you.
You can pass any name in the data object of routes variable (app-routing.module.ts) as follows
const routes: Routes = [
{
path: '',
component: Component,
data: {
page_title: 'Title of your page'
}
}
]
Then fetch the value of page_title in the data object of the routes into the app.component.ts and set as title.
import { Router, RoutesRecognized } from '@angular/router';
import { Title } from '@angular/platform-browser';
export class AppComponent {
page_title = '';
constructor(private titleService: Title, private route: Router) {
route.events.subscribe(event => {
if (event instanceof RoutesRecognized) {
let current_route = event.state.root.firstChild;
this.page_title = current_route?.data.page_title;
if (this.page_title == undefined) {
alert('Please set page title for the routing')
}
else {
titleService.setTitle(this.page_title);
}
}
});
}
}
You can also try to declare the service then copy the codes in the constructor to a function inside the service and do the necessary imports, After call the function of service inside constructor of app.component.ts which will help in future projects.
Just add a title key in the routes const. For instance
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// Components
import {ViewHomeComponent} from "./components/home.component";
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: ViewHomeComponent, title: 'Home' }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export default class ModuleHomeRouting {}
That will set automatically the title to 'Home'!