Feature Request: pageTitle Prefix and Suffix

[ladvoc]

Resources: Before submitting an issue, please consult our docs.

Stencil version:

[email protected] /Users/jacob/Developer/frontend
└── @stencil/[email protected] 

I'm submitting a ... [ ] bug report [x] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior: As websites and web apps often do, I append the name of my app to the end of the page title. To accomplish this I manually append the app name:

// example-page.tsx
render() {
    return [
        <stencil-route-title pageTitle='Example Page - App Name'></stencil-route-title>,
        <h1>This is an example</h1>
    ];
}

Expected behavior:

However, this method is not ideal. It would be extremely useful if stencil-router has a pageTitlePrefix and pageTitleSuffix property.

Related code:

The pageTitleSuffix will be appended to the pageTitle string provided by stencil-route-title in each component.

// app-root.tsx
render() {
    return (
        <stencil-router pageTitleSuffix=" - App Name">
            <stencil-route-switch>
                <stencil-route url='/example' component='example-page' />
            </stencil-route-switch>
        </stencil-router>
    );
}

When visiting this route, the document title is still "Example Page - App Name."

// example-page.tsx
render() {
    return [
        <stencil-route-title pageTitle='Example Page'></stencil-route-title>,
        <h1>This is an example</h1>
    ];
}

[DonoCorc]

@jacobgelman you can currently set <stencil-router titleSuffix=' - Whatever'> but there isn't a prefix version.