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';
selector: 'app-root',
templateUrl: './app.component.html'
export class AppComponent implements OnInit {
private titleService: Title,
private activatedRoute: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
.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) =>
.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

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