@tylertech/forge-extended-angular

Tyler Forge™ Extended Angular Adapter

Angular wrapper components for Tyler Forge™ Extended Web Components with full TypeScript support, Angular Forms integration, and tree-shakable modules.

Why This Library?

Angular doesn't natively recognize custom elements without CUSTOM_ELEMENTS_SCHEMA, which removes type safety and IDE support. This library provides:

• Type-safe Angular components that wrap each Forge extended Web Component
• Full TypeScript support with IntelliSense for properties and events
• Angular Forms integration with ControlValueAccessor for formControl, formControlName, and ngModel
• Tree-shakable modules - import only what you need
• No CUSTOM_ELEMENTS_SCHEMA required

Version Compatibility

@tylertech/forge-extended-angular	Angular	@tylertech/forge-extended
^2.0.0	>=20.0.0 < 22.0.0	^1.2.1
^1.0.0	>=19.0.0 < 21.0.0	^1.0.0

Installation

Install both the core Forge extended components and the Angular adapter:

npm install @tylertech/forge-extended @tylertech/forge-extended-angular

Note: @tylertech/forge-extended is a peer dependency and must be installed alongside this package.

Quick Start

import { Component } from '@angular/core';
import { ForgeQuantityFieldModule } from '@tylertech/forge-extended-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ForgeQuantityFieldModule],
  template: `<forge-quantity-field [value]="5"></forge-quantity-field>`
})
export class AppComponent {}

Usage

Standalone Components (Recommended)

Import component modules directly in your standalone components:

import { Component } from '@angular/core';
import { ForgeQuantityFieldModule } from '@tylertech/forge-extended-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ForgeQuantityFieldModule],
  template: `
    <forge-quantity-field
      [value]="quantity"
      (valueChange)="onQuantityChange($event)">
    </forge-quantity-field>
  `
})
export class ExampleComponent {
  quantity = 5;

  onQuantityChange(value: number): void {
    this.quantity = value;
  }
}

NgModule-based Applications

For traditional NgModule-based applications, import the component modules in your Angular module:

import { NgModule } from '@angular/core';
import { ForgeQuantityFieldModule } from '@tylertech/forge-extended-angular';

@NgModule({
  imports: [
    ForgeQuantityFieldModule,
    // ... other modules
  ]
})
export class AppModule { }

Then use the component in your templates:

<forge-quantity-field
  [value]="quantity"
  (valueChange)="onQuantityChange($event)">
</forge-quantity-field>

Using with Angular Forms

The adapter library provides ControlValueAccessor support for form-enabled components.

Standalone example:

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { ForgeQuantityFieldModule } from '@tylertech/forge-extended-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ReactiveFormsModule, ForgeQuantityFieldModule],
  template: `
    <forge-quantity-field [formControl]="quantityControl"></forge-quantity-field>
  `
})
export class ExampleComponent {
  quantityControl = new FormControl(5);
}

NgModule example:

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { ForgeQuantityFieldModule } from '@tylertech/forge-extended-angular';

@NgModule({
  imports: [
    ReactiveFormsModule,
    ForgeQuantityFieldModule
  ]
})
export class FeatureModule { }

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <forge-quantity-field [formControl]="quantityControl"></forge-quantity-field>
  `
})
export class ExampleComponent {
  quantityControl = new FormControl(5);
}

Available Components

This library provides Angular wrappers for all Forge extended components:

Component	Module	Description
<forge-app-launcher>	ForgeAppLauncherModule	Application launcher with navigation
<forge-app-launcher-link>	ForgeAppLauncherLinkModule	Link items for app launcher
<forge-busy-indicator>	ForgeBusyIndicatorModule	Loading indicator overlay
<forge-confirmation-dialog>	ForgeConfirmationDialogModule	Confirmation dialog component
<forge-multi-select-header>	ForgeMultiSelectHeaderModule	Multi-select table header
<forge-profile-link>	ForgeProfileLinkModule	User profile link component
<forge-quantity-field>	ForgeQuantityFieldModule	Numeric input with increment/decrement
<forge-responsive-toolbar>	ForgeResponsiveToolbarModule	Responsive toolbar container
<forge-theme-toggle>	ForgeThemeToggleModule	Light/dark theme toggle
<forge-user-profile>	ForgeUserProfileModule	User profile dropdown

Each component is exported as a standalone Angular module that you can import individually for tree-shaking.

Additional Resources

• Tyler Forge Documentation - Complete component documentation
• GitHub Repository - Source code and issues
• Changelog - Release notes and version history

License

Apache 2.0 - See LICENSE for details.