Skip to main content

​
Overview

ToolbarComponent renders the top application toolbar. It displays the current page title, provides navigation controls (sidenav toggle or home link depending on viewport size), and shows a progress bar during loading operations.

​
Selector

'jet-toolbar'

​
Usage

<jet-toolbar
  [isLargeViewport]="isLargeViewport()"
  [shouldAddSafeArea]="shouldAddSafeArea()"
  (toggleMatSidenav)="matSidenav.toggle()"
></jet-toolbar>

​
Inputs

​
isLargeViewport
boolean
required
Indicates whether the current viewport is large (desktop). Changes toolbar behavior:
  • true: Shows sidenav toggle button
  • false: Shows home navigation button
​
shouldAddSafeArea
boolean
required
Determines if safe area padding should be added for devices with notches or rounded corners (iOS, modern Android).

​
Outputs

​
toggleMatSidenav
EventEmitter<void>
Emitted when the user clicks the sidenav toggle button (large viewport only). Parent component should handle opening/closing the sidenav.

​
Properties

​
Protected Properties

​
progressBarConfiguration
Signal<ProgressBarConfiguration>
Signal containing progress bar state from ProgressBarService:
  • isVisible: boolean - Whether progress bar is shown
  • mode: ProgressBarMode - ‘determinate’, ‘indeterminate’, ‘buffer’, or ‘query’
  • value: number - Progress value (0-100)
  • bufferValue: number - Buffer value for buffer mode
​
toolbarTitle
Signal<string | null>
Signal containing the current toolbar title from ToolbarTitleService. Shows “loading” if null.

​
Template Structure

The toolbar adapts based on viewport size:

​
Large Viewport (Desktop)

<mat-toolbar>
  <mat-progress-bar />
  <button matIconButton (click)="toggleMatSidenav.emit()">
    <mat-icon>short_text</mat-icon>
  </button>
  <span>{{ toolbarTitle }}</span>
</mat-toolbar>

​
Small Viewport (Mobile)

<mat-toolbar>
  <mat-progress-bar />
  <a matIconButton [routerLink]="['/']">
    <mat-icon svgIcon="logo"></mat-icon>
  </a>
  <span>{{ toolbarTitle }}</span>
</mat-toolbar>

​
Features

​
Progress Bar

Displays at the top of the toolbar with configurable modes:
  • Query: Indeterminate with reverse animation (default for navigation)
  • Indeterminate: Continuous animation
  • Determinate: Shows specific progress percentage
  • Buffer: Shows download progress with buffer
The progress bar automatically fades in/out based on isVisible state. Behavior changes based on viewport:
  • Desktop: Toggle button to show/hide sidenav
  • Mobile: Logo button linking to home page

​
Safe Area Support

When shouldAddSafeArea is true, the toolbar adds padding for:
  • iPhone notch areas
  • Android rounded corners
  • Other device-specific safe areas

​
Analytics Tracking

Built-in analytics events:
  • toggle_sidenav - When sidenav toggle clicked (desktop)
  • open_home - When home logo clicked (mobile)

​
Dependencies

The component injects:
  • LoggerService - Component initialization logging
  • ProgressBarService - Progress bar state management
  • ToolbarTitleService - Toolbar title state management

​
Example: Full Integration

import { Component, signal } from '@angular/core';
import { ToolbarComponent } from '@jet/components/toolbar/toolbar.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToolbarComponent],
  template: `
    <mat-sidenav-container>
      <mat-sidenav #sidenav>
        <!-- Sidenav content -->
      </mat-sidenav>
      
      <mat-sidenav-content>
        <jet-toolbar
          [isLargeViewport]="isLargeViewport()"
          [shouldAddSafeArea]="shouldAddSafeArea()"
          (toggleMatSidenav)="sidenav.toggle()"
        ></jet-toolbar>
        
        <main>
          <!-- Page content -->
        </main>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `
})
export class AppComponent {
  isLargeViewport = signal(false);
  shouldAddSafeArea = signal(true);
}

​
Updating Toolbar Title

The toolbar title is managed by ToolbarTitleService. Update it from any component: 
import { Component, inject } from '@angular/core';
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';

@Component({
  selector: 'app-my-page',
  template: `<h1>My Page</h1>`
})
export class MyPageComponent {
  #toolbarTitleService = inject(ToolbarTitleService);
  
  constructor() {
    this.#toolbarTitleService.setToolbarTitle('My Page Title');
  }
}
Or use PageComponent which automatically manages the toolbar title.

​
Styling

The toolbar includes these CSS classes:
  • jet-sidenav-content-toolbar - Applied to toolbar container
  • jet-add-safe-area - Conditionally applied for safe area padding
Customize in toolbar.component.scss: 
.jet-sidenav-content-toolbar {
  position: relative;
  
  mat-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}

.jet-add-safe-area {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

​
Accessibility

  • Button includes aria-label for screen readers
  • Tooltip provides additional context on hover
  • Progress bar includes loading announcement
  • High contrast mode supported

​
Source

Location: src/app/components/toolbar/toolbar.component.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us