Angular includes a Title service, which includes getTitle(): string and setTitle(newTitle: string). If you want to keep an in-page header matching the browser title tag, you’ll need something to enable that possibility.

If you like the pattern of subscribing to changes (as you might be, if you’re using Angular), check out the following SubscribableTitleService:

// src/app/subscribable-title.service.ts

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

export class SubscribableTitleService {
  public title: BehaviorSubject<string>;

  constructor(private titleService: Title) {
    this.title = new BehaviorSubject<string>(titleService.getTitle());

  setTitle(newTitle: string) {

Now, to use it in a page header:

// src/app/header/header.component.ts

import { Component, OnInit } from '@angular/core';

import { SubscribableTitleService } from '../subscribable-title.service';

  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
export class HeaderComponent implements OnInit {
  public headerText: string;

  constructor(private subscribableTitleService: SubscribableTitleService) { }

  ngOnInit() {
    this.subscribableTitleService.title.subscribe(title => {
      this.headerText = title;

With the following or similar src/app/header/header.component.html file:

<h1>{{ headerText }}</h1>


Credit to for a similar strategy, but this blog post’s SubscribableTitleService adds functionality for manipulating the browser’s title tag.