Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Setting dynamic page titles in Angular 2+
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(
private titleService: Title,
private activatedRoute: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
})
.filter((route) => route.outlet === 'primary')
.mergeMap((route) => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
}

Can Please someone explain a little bit the ngOnInit function? Thanks.

aurel1211 commented Sep 25, 2017

I found here some detailed explanations https://g00glen00b.be/page-title-route-change-angular-2/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment