Skip to main content
Jet provides a set of core Angular components that form the foundation of your application. These components handle layout, navigation, SEO, and common UI patterns.

​
Core Components

​
Layout Components

AppComponent

Root component managing layout, theming, navigation, and routing

PageComponent

Wrapper component for individual pages with SEO meta tag management

ToolbarComponent

Top application toolbar with navigation toggle and progress bar

SidenavComponent

Side navigation menu with responsive behavior

​
UI Components

FooterComponent

Application footer with social media links

​
Architecture

All Jet components follow these principles:
  • OnPush Change Detection: Optimized for performance using ChangeDetectionStrategy.OnPush
  • Standalone Components: All components are standalone with explicit imports
  • Signal-based: Leverages Angular signals for reactive state management
  • Material Design: Built with Angular Material components
  • Internationalization: Full i18n support via Transloco
  • Analytics Ready: Integrated analytics event tracking

​
Common Patterns

​
Dependency Injection

All components use the inject() function for dependency injection: 
readonly #loggerService = inject(LoggerService);
readonly #router = inject(Router);

​
Input Signals

Components use signal-based inputs for reactive data flow: 
public readonly seoTitle = input.required<string>();
public readonly isLargeViewport = input.required<boolean>();

​
Output Events

Components emit events using the output() function: 
protected readonly toggleMatSidenav = output<void>();

​
Getting Started

Each component page includes:
  • Component selector and usage examples
  • Input properties with types and descriptions
  • Output events
  • Public methods and properties
  • Template integration examples
Start with AppComponent to understand the main application structure.

Build docs developers (and LLMs) love

Get started for freeTalk to us