tessl/npm-ember-page-title

Page title management for Ember.js applications with dynamic updates, FastBoot compatibility, and TypeScript support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Template Helper

Name: tessl/npm-ember-page-title
Author: tessl

The {{page-title}} helper provides a declarative way to set page titles in Ember templates with automatic lifecycle management and configurable behavior.

Capabilities

Page Title Helper

Declarative helper for setting page titles with automatic registration and cleanup.

/**
 * Page title helper class for setting titles in templates
 */
class PageTitle extends Helper<PageTitleHelperSignature> {
  constructor(owner: Owner);
  compute(params: string[], userOptions: PageTitleHelperOptions): string;
  willDestroy(): void;
}

interface PageTitleHelperSignature {
  Args: {
    Positional: string[];
    Named: PageTitleHelperOptions;
  };
  Return: void;
}

interface PageTitleHelperOptions {
  /** Whether to prepend or append the title token (default: true) */
  prepend?: boolean;
  /** Whether token should always be at the beginning (default: false) */
  front?: unknown;
  /** Whether to replace all previous tokens (default: false) */
  replace?: boolean;
  /** Separator to use after this token (default: " | ") */
  separator?: string;
}

Template Usage:

{{!-- Basic usage --}}
{{page-title "My Page"}}

{{!-- Dynamic content --}}
{{page-title @model.title}}

{{!-- Custom separator --}}
{{page-title "Settings" separator=" - "}}

{{!-- Append instead of prepend --}}
{{page-title "Admin" prepend=false}}

{{!-- Replace all previous titles --}}
{{page-title "Error" replace=true}}

{{!-- Always show at front --}}
{{page-title "Important" front=true}}

{{!-- Multiple parameters joined --}}
{{page-title "User" @model.name}}

gts/gjs Usage:

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "My Page"}}
  {{pageTitle @model.title separator=" - "}}
  {{pageTitle "Settings" prepend=false}}
</template>

Helper Options

The helper accepts several named parameters to control title behavior:

interface PageTitleHelperOptions {
  /** Whether to prepend or append the title token */
  prepend?: boolean;
  /** Whether token should always be at the beginning */  
  front?: unknown;
  /** Whether to replace all previous tokens */
  replace?: boolean;
  /** Separator to use after this token */
  separator?: string;
}

Option Behaviors:

prepend: When true (default), the title appears before existing titles. When false, appears after.
front: When true, the title always appears at the very beginning, regardless of other tokens.
replace: When true, removes all previous title tokens and uses only this one.
separator: Custom separator string to appear after this token (default from config or " | ").

Examples:

{{!-- Route hierarchy: Home | Products | Laptops --}}
{{page-title "Home"}}
{{page-title "Products"}}  
{{page-title "Laptops"}}

{{!-- With custom separators: Home > Products > Laptops --}}
{{page-title "Home" separator=" > "}}
{{page-title "Products" separator=" > "}}
{{page-title "Laptops"}}

{{!-- With append: Laptops | Products | Home --}}
{{page-title "Home" prepend=false}}
{{page-title "Products" prepend=false}}
{{page-title "Laptops" prepend=false}}

{{!-- With front: URGENT | Home | Products --}}
{{page-title "Home"}}
{{page-title "Products"}}
{{page-title "URGENT" front=true}}

{{!-- With replace: Error (only) --}}
{{page-title "Home"}}
{{page-title "Products"}}
{{page-title "Error" replace=true}}

Lifecycle Management

The helper automatically manages its lifecycle:

/**
 * Helper lifecycle methods
 */
class PageTitle extends Helper<PageTitleHelperSignature> {
  /** Called when helper is created - registers token with service */
  constructor(owner: Owner);
  
  /** Called when helper parameters change - updates token */
  compute(params: string[], userOptions: PageTitleHelperOptions): string;
  
  /** Called when helper is destroyed - removes token from service */
  willDestroy(): void;
}

Construction: Automatically registers a token with the page-title service
Computation: Updates the token when template parameters change
Destruction: Removes the token when the component/template is destroyed

This ensures title tokens are properly managed throughout the Ember application lifecycle without manual intervention.

Install with Tessl CLI