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);
    }
}