Jet
BuyFollow on X
  • Home
  • Satisfied Requirements
  • License
  • Architecture
    • Overview
    • Internal Dependency Graph
    • External Dependencies
    • Conventions
  • Recipes
    • Get Started
    • Add a Page
    • Customise Fonts
    • Customise Icons
    • Customise Languages
    • Customise Themes
    • Add an Environment Variable
  • Classes
    • Jet Mat Paginator Intl
    • Transloco HTTP Loader
  • Components
    • App Component
    • Footer Component
    • Home Page Component
    • Message Page Component
    • Not Found Page Component
    • Page Component
    • Profile Page Component
    • Reset Password Page Component
    • Settings Page Component
    • Sign In Page Component
    • Sign Out Page Component
    • Sign Up Page Component
    • Update Password Page Component
  • Constants
    • Color Scheme Options
    • Default Color Scheme Option
    • Default Language Option
    • Default Settings
    • Language Options
    • Navigation Menu Items
  • Directives
    • Analytics Directive
  • Enums
    • Bucket
    • LocalStorage Key
    • Query Param
    • SessionStorage Key
    • Table
  • Guards
    • Is Authenticated
    • Is Not Authenticated
  • Interfaces
    • Color Scheme Option
    • Language Option
    • Navigation Menu Item
    • Profile
    • Progress Bar Configuration
    • Settings
  • Services
    • Alert Service
    • Analytics Service
    • Logger Service
    • Profile Service
    • Progress Bar Service
    • Service Worker Service
    • Settings Service
    • Storage Service
    • Supabase Service
    • Toolbar Title Service
    • User Service
  • Types
    • Available Color Scheme
    • Available Font
    • Available Language
    • Available OAuth Provider
Powered by GitBook
On this page

Was this helpful?

  1. Components

App Component

class AppComponent

app.component.ts
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { DOCUMENT, NgClass, NgOptimizedImage, NgStyle } from '@angular/common';
import {
  Component,
  OnDestroy,
  OnInit,
  Renderer2,
  Signal,
  effect,
  inject,
  untracked,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Meta } from '@angular/platform-browser';
import {
  Event,
  NavigationCancel,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router,
  RouterLink,
  RouterOutlet,
} from '@angular/router';
import { COLOR_SCHEME_OPTIONS } from '@jet/constants/color-scheme-options.constant';
import { DEFAULT_COLOR_SCHEME_OPTION } from '@jet/constants/default-color-scheme-option.constant';
import { DEFAULT_LANGUAGE_OPTION } from '@jet/constants/default-language-option.constant';
import { NAVIGATION_MENU_ITEMS } from '@jet/constants/navigation-menu-items.constant';
import { AnalyticsDirective } from '@jet/directives/analytics/analytics.directive';
import { ColorSchemeOption } from '@jet/interfaces/color-scheme-option.interface';
import { LanguageOption } from '@jet/interfaces/language-option.interface';
import { NavigationMenuItem } from '@jet/interfaces/navigation-menu-item.interface';
import { ProgressBarConfiguration } from '@jet/interfaces/progress-bar-configuration.interface';
import { AlertService } from '@jet/services/alert/alert.service';
import { AnalyticsService } from '@jet/services/analytics/analytics.service';
import { LoggerService } from '@jet/services/logger/logger.service';
import { ProgressBarService } from '@jet/services/progress-bar/progress-bar.service';
import { ServiceWorkerService } from '@jet/services/service-worker/service-worker.service';
import { SettingsService } from '@jet/services/settings/settings.service';
import { ToolbarTitleService } from '@jet/services/toolbar-title/toolbar-title.service';
import { UserService } from '@jet/services/user/user.service';
import { AvailableColorScheme } from '@jet/types/available-color-scheme.type';
import { AvailableFont } from '@jet/types/available-font.type';
import { AvailableLanguage } from '@jet/types/available-language.type';
import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
import { User } from '@supabase/supabase-js';
import packageJson from 'package.json';
import { Subscription } from 'rxjs';
import { FooterComponent } from '../footer/footer.component';

@Component({
  imports: [
    NgClass,
    NgOptimizedImage,
    NgStyle,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatProgressBarModule,
    MatSidenavModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    RouterLink,
    RouterOutlet,
    AnalyticsDirective,
    TranslocoModule,
    FooterComponent,
  ],
  selector: 'jet-app',
  styleUrl: './app.component.scss',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, OnDestroy {
  private readonly _breakpointObserver = inject(BreakpointObserver);
  private readonly _document = inject(DOCUMENT);
  private readonly _renderer2 = inject(Renderer2);
  private readonly _matIconRegistry = inject(MatIconRegistry);
  private readonly _meta = inject(Meta);
  private readonly _router = inject(Router);
  private readonly _alertService = inject(AlertService);
  private readonly _analyticsService = inject(AnalyticsService);
  private readonly _loggerService = inject(LoggerService);
  private readonly _progressBarService = inject(ProgressBarService);
  private readonly _serviceWorkerService = inject(ServiceWorkerService);
  private readonly _settingsService = inject(SettingsService);
  private readonly _toolbarTitleService = inject(ToolbarTitleService);
  private readonly _userService = inject(UserService);
  private readonly _translocoService = inject(TranslocoService);

  private _activeFont: AvailableFont;
  private _activeLanguage: AvailableLanguage;
  private _activeColorScheme: AvailableColorScheme;
  private _activeThemeColor: ColorSchemeOption['themeColor'];
  private readonly _darkColorSchemeMediaQuery: MediaQueryList;
  private _systemColorSchemeListener:
    | ((mediaQueryListEvent: MediaQueryListEvent) => void)
    | undefined;
  private readonly _isPwaMode: boolean;
  private _routerSubscription: Subscription;
  private _serviceWorkerUpdateSubscription: Subscription;

  public activeNavigationMenuItemPath: NavigationMenuItem['path'] | undefined;
  public readonly isSmallViewport: boolean;
  public readonly languageOption: Signal<LanguageOption>;
  public readonly navigationMenuItems: NavigationMenuItem[];
  public readonly progressBarConfiguration: Signal<ProgressBarConfiguration>;
  public readonly toolbarTitle: Signal<string | null>;
  public readonly user: Signal<User | null>;

  public constructor() {
    // Buy to unlock
  }

  public ngOnInit(): void {
    // Buy to unlock
  }

  public ngOnDestroy(): void {
    // Buy to unlock
  }

  private _setColorSchemeClass(nextColorScheme: AvailableColorScheme): void {
    // Buy to unlock
  }

  private _setFontClass(nextFont: AvailableFont): void {
    // Buy to unlock
  }

  private _setIcons(): void {
    // Buy to unlock
  }

  private _setLanguage(nextLanguageOption: LanguageOption): void {
    // Buy to unlock
  }

  private _setSystemColorSchemeListener(): void {
    // Buy to unlock
  }

  private _setThemeColor(nextColorScheme: AvailableColorScheme): void {
    // Buy to unlock
  }

  private _setZoom(isPwaMode: boolean): void {
    // Buy to unlock
  }

  private _unsetSystemColorSchemeListener(): void {
    // Buy to unlock
  }
}
PreviousTransloco HTTP LoaderNextFooter Component

Last updated 4 months ago

Was this helpful?