Binding header to text based on router url (Angular4)

Question

What's the best way to get header text to change based on the page? I'm currently working from a single header that changes color based on router.url (see previous question here) and I want to change the page header text dynamically.

I feel like the logic should also be similar should I also want to add in images based on the pages as well.

At first I thought to iterate through an array of titles, but that ended up just printing all the titles on all the pages. Then I thought to create a function that check would check the link and return the appropriate title, but I'm not sure how to insert it...

app.component.html

   <!-- <div class="set-margin page-title"><h1 *ngFor="let pageTitle of pageTitles">{{ pageTitle.title }}</h1></div> -->
   <div class="set-margin page-title">
     <!-- <h1 *ngFor="let pageTitle of pageTitles">{{ pageTitle.title }}</h1> -->
     <h1>{{ getHeaderText() }}</h1>

  </div>

app.component.ts

export class AppComponent {
activatedRoute = '';
title: string;

  pageTitles = [
    { 'title': 'About'},
    { 'title': 'Resources'},
    { 'title': 'News' },
    { 'title': 'Contact' }
  ];
  activateRoute(activatedRoute: string) {
    this.activatedRoute = activatedRoute;
  }

  getHeaderText() {
      if (this.activatedRoute.includes('about')) {
        this.title = 'About';
          return this.title;
      } else if (this.activatedRoute.includes('resources')) {
          this.title = 'Resources';
          return this.title;
      } else if (this.activatedRoute.includes('newsroom')) {
          this.title = 'News';
          return this.title;
      } else {
        this.title = 'Contact';
          return this.title;
    }
  }

  constructor(private router: Router) {}
}

Answer 1

You dont need the title or pageTitles. Create a getter property for getting the active page title.

Change your component html to:

<div class="set-margin page-title">
    <h1>{{ headerTitle }}</h1>
</div>

... and in your component class:

export class AppComponent {
  activatedRoute = '';

  activateRoute(activatedRoute: string) {
    this.activatedRoute = activatedRoute;
  }

  get headerTitle {
      if (this.activatedRoute.includes('about')) {
        return 'About';
      } else if (this.activatedRoute.includes('resources')) {
        return 'Resources';
      } else if (this.activatedRoute.includes('newsroom')) {
        return 'News';
      } else {
        return 'Contact';
      }
    }

  constructor(private router: Router) {}
}

Answer 2

You could pass these titles as data via the router, which would look something like this

{ path: 'about', component: AboutComponent, data: {title: 'About Us'}},
{ path: 'resources', component: AboutComponent, data: {title: 'Amazing Resources'}},
{ path: 'newsroom', component: AboutComponent, data: {title: 'News'}},

app.component.ts

first, be sure to add these imports at the top

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

then you need to fetch this data from the router. Your AppComponent might look like this

    export class AppComponent implements OnInit {
      pageTitle = 'default page title';
      constructor(private route: ActivatedRoute) {}

      ngOnInit() {
        this.route.data.subscribe(
          (data: Data) => {
            this.pageTitle = data['title'];
          }
        );
      }
    }

then display the data on app.component.html

app.component.html

{{ pageTitle }}