Skip to main content

​
Overview

AppComponent is the root component of the Jet application. It manages the overall layout with Material Design sidenav, handles theme switching, language selection, viewport responsiveness, and coordinates navigation between different parts of the application.

​
Selector

'jet-app'

​
Usage

<jet-app></jet-app>
This component is typically used as the root component in your main.ts bootstrap configuration.

​
Features

  • Responsive Layout: Adapts between mobile and desktop viewports
  • Theme Management: Supports light, dark, and automatic color schemes
  • Internationalization: Multi-language support with RTL/LTR directionality
  • Navigation: Integrated sidenav and bottom tab navigation
  • Progress Tracking: Shows loading progress during navigation
  • PWA Support: Enhanced viewport handling for PWA mode
  • Analytics Integration: Tracks application usage and navigation events

​
Properties

​
Protected Properties

​
activeNavigationMenuItemPath
NavigationMenuItem['path'] | undefined
Currently active navigation menu item path, updated on navigation events
​
directionality
Signal<LanguageOption['directionality']>
Text directionality signal (‘ltr’ or ‘rtl’) based on selected language
​
isLargeViewport
Signal<boolean>
Signal indicating if viewport matches large screen breakpoint (desktop)
​
isMatSidenavOpen
WritableSignal<boolean>
Writable signal controlling sidenav open/closed state
​
matSidenavMode
Signal<MatDrawerMode>
Computed signal returning ‘side’ for large viewports or ‘over’ for small viewports
​
navigationMenuItems
NavigationMenuItem[]
Array of navigation menu items from NAVIGATION_MENU_ITEMS constant
​
shouldAddSafeArea
Signal<boolean>
Computed signal determining if safe area padding should be applied

​
Lifecycle Methods

​
ngOnInit()

Initializes the component:
  • Logs analytics start event with app version
  • Subscribes to router events for navigation tracking
  • Handles navigation errors with alerts
  • Controls progress bar visibility during navigation
  • Sets up Material icons
  • Configures viewport zoom for PWA mode

​
ngOnDestroy()

Cleanup method that removes the dark color scheme media query event listener.

​
Private Methods

​
#loadFontPair(fontPairUrl: string)

Dynamically loads custom font pair stylesheet when non-default language is selected.
​
fontPairUrl
string
URL to the font pair stylesheet

​
#setColorScheme(colorScheme: string)

Applies color scheme class to document body.
​
colorScheme
string
Color scheme value: ‘light’, ‘dark’, or ‘automatic’

​
#setFontPair(fontPair: string)

Applies font pair class to document body.
​
fontPair
string
Font pair identifier

​
#setIcons()

Configures Material Icon Registry with default font set and custom SVG icons.

​
#setLanguage(language: string)

Sets HTML lang attribute and activates Transloco language.
​
language
string
Language code (e.g., ‘en’, ‘ar’)

​
#setThemeColorMeta(colorScheme: string)

Updates theme-color meta tag based on color scheme.
​
colorScheme
string
Color scheme value

​
#setZoom(isPwaMode: boolean)

Adjusts viewport meta tag for PWA mode with custom zoom level.
​
isPwaMode
boolean
Whether app is running in PWA standalone mode

​
Template Structure

The component template includes: 
<mat-sidenav-container>
  <mat-sidenav>
    <jet-sidenav />
  </mat-sidenav>
  
  <mat-sidenav-content>
    <jet-toolbar />
    <main>
      <router-outlet />
    </main>
    <footer>
      <jet-footer />
    </footer>
    
    <!-- Bottom tab navigation for mobile -->
    <nav mat-tab-nav-bar>
      <!-- Navigation items -->
    </nav>
  </mat-sidenav-content>
</mat-sidenav-container>

​
Dependencies

The component injects these services:
  • BreakpointObserver - Viewport size detection
  • Router - Navigation event handling
  • AlertService - Error notifications
  • AnalyticsService - Usage tracking
  • LoggerService - Debug logging
  • ProgressBarService - Loading indicators
  • SettingsService - Theme and language settings
  • TranslocoService - Internationalization
  • MatIconRegistry - Icon configuration
  • DomSanitizer - Safe resource URLs
  • Meta - Meta tag management
  • Renderer2 - DOM manipulation

​
Effects

The component uses Angular effects to react to setting changes:

​
colorSchemeOption Effect

Watches color scheme changes and updates:
  • Document body classes
  • Theme-color meta tag

​
languageOption Effect

Watches language changes and updates:
  • Font pair stylesheet loading
  • Font pair body classes
  • HTML lang attribute
  • Transloco active language

​
Source

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

Build docs developers (and LLMs) love

Get started for freeTalk to us