Skip to main content
Jet provides a comprehensive set of Angular services to handle common application needs. All services follow Angular best practices with proper dependency injection and are tree-shakeable.

Available Services

AlertService

Display user notifications and alerts using Material Design snackbars with internationalization support.
import { AlertService } from '@jet/services/alert/alert.service';

constructor(private alertService: AlertService) {}

this.alertService.showAlert('Operation successful!');

AnalyticsService

Track user interactions and events using Google Analytics 4 with a simple, type-safe API.
import { AnalyticsService } from '@jet/services/analytics/analytics.service';

this.analyticsService.logAnalyticsEvent({
  name: 'button_click',
  data: { button_id: 'submit' }
});

LoggerService

Structured logging for development and debugging with console output that respects environment configuration.
import { LoggerService } from '@jet/services/logger/logger.service';

this.loggerService.log('Debug message');
this.loggerService.logError(new Error('Something went wrong'));

ProfileService

Manage user profiles with Supabase integration including avatar uploads and profile data management.
import { ProfileService } from '@jet/services/profile/profile.service';

const { data } = await this.profileService.selectProfile();

ProgressBarService

Control the application-wide progress bar displayed in the toolbar for loading states and operations.
import { ProgressBarService } from '@jet/services/progress-bar/progress-bar.service';

this.progressBarService.showIndeterminateProgressBar();

ServiceWorkerService

Manage PWA updates and service worker lifecycle with automatic update detection and user notifications.
import { ServiceWorkerService } from '@jet/services/service-worker/service-worker.service';

await this.serviceWorkerService.checkForUpdate();

SettingsService

Manage application settings with reactive signals and local storage persistence.
import { SettingsService } from '@jet/services/settings/settings.service';

this.settingsService.updateSettings({ 
  colorSchemeOption: { mode: 'dark' } 
});

StorageService

Type-safe wrapper around browser localStorage and sessionStorage with namespace isolation.
import { StorageService } from '@jet/services/storage/storage.service';

this.storageService.setLocalStorageItem(LocalStorageKey.Settings, data);

ToolbarTitleService

Manage the toolbar title displayed in the application’s main toolbar with reactive updates.
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';

this.toolbarTitleService.setToolbarTitle('My Page');

UserService

Complete authentication and user management with Supabase Auth integration.
import { UserService } from '@jet/services/user/user.service';

await this.userService.signInWithPassword(email, password);

Service Architecture

Dependency Injection

All services use Angular’s modern inject() function and are provided at the root level for singleton behavior:
@Injectable({ providedIn: 'root' })
export class MyService {
  readonly #dependency = inject(DependencyService);
}

Reactive State Management

Services use Angular signals for reactive state management:
// Read-only signal access
const user = this.userService.user();

// Computed values
const directionality = this.settingsService.directionality();

Type Safety

All services are fully typed with TypeScript interfaces and types for compile-time safety:
public getLocalStorageItem<T>(key: LocalStorageKey): null | T

Configuration

Injection Tokens

Services can be configured using Angular injection tokens:
  • IS_LOGGING_ENABLED - Enable/disable logging
  • IS_ANALYTICS_ENABLED - Enable/disable analytics
  • GOOGLE_ANALYTICS_MEASUREMENT_ID - GA4 measurement ID
  • SUPABASE_CLIENT - Supabase client instance

Environment-Based Setup

Configure services in your environment files:
export const environment = {
  isLoggingEnabled: true,
  isAnalyticsEnabled: false,
  googleAnalyticsMeasurementId: 'G-XXXXXXXXXX'
};

Best Practices

  1. Use dependency injection - Inject services through constructors using Angular’s inject() function
  2. Leverage signals - Access reactive state through signal APIs
  3. Handle errors - Use try/catch blocks with async service methods
  4. Type your data - Use TypeScript interfaces when working with service data
  5. Clean up subscriptions - Though most services use signals, manually created subscriptions should be cleaned up

Next Steps

Explore each service’s detailed API documentation to learn about all available methods, parameters, and return types.

Build docs developers (and LLMs) love