The ToolbarTitleService provides a centralized way to manage the toolbar title displayed in the application’s main toolbar. It uses Angular signals for reactive updates.
Location
src/app/services/toolbar-title/toolbar-title.service.ts
Properties
Read-only signal containing the current toolbar title. Returns null when no title is set.
Methods
Sets the toolbar title to the specified string.
The title to display in the toolbar
toolbarTitleService.setToolbarTitle('Profile Settings');
Usage in PageComponent
The PageComponent automatically sets the toolbar title when the toolbarTitle input is provided:
// page.component.ts
export class PageComponent implements OnInit {
readonly #toolbarTitleService = inject(ToolbarTitleService);
public readonly toolbarTitle = input<string | undefined>(undefined);
public ngOnInit(): void {
const toolbarTitle = this.toolbarTitle();
if (toolbarTitle) {
this.#toolbarTitleService.setToolbarTitle(toolbarTitle);
}
}
}
Usage in Templates
Page components typically set the toolbar title through the PageComponent wrapper:
<ng-container *transloco="let t">
<jet-page
[toolbarTitle]="t('profile-page.toolbar-title')"
[seoTitle]="t('profile-page.seo.title')"
>
<!-- Page content -->
</jet-page>
</ng-container>
ToolbarComponent displays the toolbar title reactively:
// toolbar.component.ts
export class ToolbarComponent {
readonly #toolbarTitleService = inject(ToolbarTitleService);
protected readonly toolbarTitle = this.#toolbarTitleService.toolbarTitle;
}
<!-- toolbar.component.html -->
<span class="toolbar-title">{{ toolbarTitle() }}</span>
Manual Usage in Components
You can also set the toolbar title directly in component logic:
import { inject, OnInit } from '@angular/core';
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';
export class CustomComponent implements OnInit {
readonly #toolbarTitleService = inject(ToolbarTitleService);
ngOnInit() {
this.#toolbarTitleService.setToolbarTitle('Custom Page');
}
}
Dynamic Titles
For dynamic titles that change based on data or route parameters:
import { inject, OnInit, effect } from '@angular/core';
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';
import { ActivatedRoute } from '@angular/router';
export class DetailComponent implements OnInit {
readonly #toolbarTitleService = inject(ToolbarTitleService);
readonly #route = inject(ActivatedRoute);
ngOnInit() {
const id = this.#route.snapshot.paramMap.get('id');
this.#toolbarTitleService.setToolbarTitle(`Item ${id}`);
}
}
Internationalization
Combine with Transloco for internationalized titles:
import { inject, OnInit } from '@angular/core';
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';
import { TranslocoService } from '@jsverse/transloco';
export class I18nComponent implements OnInit {
readonly #toolbarTitleService = inject(ToolbarTitleService);
readonly #translocoService = inject(TranslocoService);
ngOnInit() {
const title = this.#translocoService.translate('my-page.title');
this.#toolbarTitleService.setToolbarTitle(title);
}
}
Implementation Details
- State managed via Angular signals for reactive updates
- Service is provided in root and available application-wide
- Initial value is
null (no title displayed)
- No automatic cleanup - title persists until explicitly changed
- Thread-safe with Angular’s change detection
The toolbar title automatically updates in the UI when setToolbarTitle() is called, thanks to Angular’s signal-based reactivity.
Use the PageComponent wrapper for automatic toolbar title management. This ensures consistent behavior across all pages.