Extending Title Service in Angular

Question

I am very new to TypeScript and I am still trying to figure out how to extend the TitleService.

Because of customizations involved in coining the Page Titles on my angular site, I have to extend the TitleService. Here's my code

import { Title } from '@angular/platform-browser';

export class PageTitleService extends Title {
constructor(public myOtherService: OtherService} {
super (null)}

public setPageTitle(customLabel: string) {
let title = this.myOtherService.getPageTitlebyLabel(customLabel)
this.setTitle(title) // this is wrong here. But how do I pass my consuming page component reference here?
}
}

And from my calling component

this.pageTitleService.setPageTitle('Home_Label');

Questions:

• The Title Service in Angular expects one constructor parameter which is: _doc: any. How do I construct my constructor in the extended class and what do I pass for super(??), as _doc is not injectable?

• How do I call this setpageTitle() from my consuming component?

I have tried writing a getMethod() instead of set and set the title from my consuming page component. But it means that I have to import TitleService even from my consuming component and the whole point of extending the TitleService is lost

Thanks

Answer 1

But why do you want to extend the Title? Usually, you only call it on your page to dynamically change the title of your current page, so I don't see the usefulness of abstracting it further. Basically, calling it in your ngOnInit or page constructor would solve 100% of the cases.

Edit1: I believe this solution here can solve your doubts.

import { Title } from '@angular/platform-browser';

export class PageTitleService {
    constructor(private myOtherService: any, private title: Title) {}
    
    setPageTitle(customLabel: string) {
        const title = this.myOtherService.getPageTitleByLabel(customLabel);
        this.title.setTitle(title);
    }
}

Answer 2

Man! I just realized Angular has marked the Title class as 'Final'. I cannot extend it. I wasted one hour trying to figure out how to extend it. I will write a wrapper service around the TitleService, instead of extending it. This is the eventual code:

import { Injectable, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { MyOtherService } from '../other-service/my-other.service'; 

@Injectable({
  providedIn: 'root'
}) 

export class PageTitleService { 

  constructor(public myOtherService: MyOtherService,

     private titleService: Title) {
  } 

  public setPageTitle(mainLabel: string) {

    let pageTitle = '';
    let subTitle = this.myOtherService.get('STATIC_LABEL); 

    if (mainLabel == '')
      title = subTitle;
    else
      title = this.myOtherService.get(mainLabel) + " - " + subTitle; 

    this.titleService.setTitle(title);   

  }

}

and the call to this from the individual page components is simply this ( where pageTitleService in the code below, is the injected parameter of the above service):

ngOnInit(): void 
{    
    this.pageTitleService.setPageTitle('PAGE_LABEL'); // OR PASS ''       
}