🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@tylertech/forge-angular

Package Overview
Dependencies
Maintainers
6
Versions
67
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tylertech/forge-angular

Forge components adapter library for Angular

latest
Source
npmnpm
Version
7.3.0
Version published
Weekly downloads
472
33.33%
Maintainers
6
Weekly downloads
 
Created
Source

Forge Angular

npm version npm downloads License

An Angular adapter library for the Tyler Forge™ Web Components library.

Overview

This library provides seamless integration between Angular and Tyler Forge Web Components, enabling type-safe usage of Forge components in Angular applications.

The Problem

Web Components (custom elements) are not fully compatible with Angular by default. Without proper integration, you must use CUSTOM_ELEMENTS_SCHEMA in your Angular modules, which causes:

  • Loss of type safety for component properties and events
  • No IntelliSense or code completion
  • Missing compile-time error checking
  • Poor developer experience

The Solution

@tylertech/forge-angular provides:

  • Auto-generated Proxy Components - Strongly-typed Angular components wrapping each <forge-*> element with:

    • Full TypeScript type safety
    • IntelliSense and autocomplete support
    • Compile-time error checking
    • Proper Angular change detection integration

  • ControlValueAccessor Directives - Seamless integration with Angular Forms:

    • formControlName support
    • formControl binding
    • ngModel two-way binding
    • Reactive and template-driven form compatibility

  • Tree-shakable Modules - Each component is exported from its own module, allowing you to include only what you use.

Result: Remove CUSTOM_ELEMENTS_SCHEMA and enjoy a fully type-safe Angular development experience with Forge components.

Version Compatibility

Support Policy: This library always supports the current and previous (current-1) major versions of Angular. For example, when Angular 21 is current, we support Angular 20 and 21. When Angular 22 releases, support moves to Angular 21 and 22.

@tylertech/forge-angularAngularForge
^7.0.0>=20.0.0 < 22.0.0^3.12.1
^6.0.0>=19.0.0 < 21.0.0^3.8.0
^5.0.0>=18.0.0 < 20.0.0^3.0.0
^4.0.0>=17.0.0 < 19.0.0^3.0.0
^3.0.0>=16.0.0 < 18.0.0^2.0.0
^2.0.0>=13.3.0 < 16.0.0^2.0.0

Installation

1. Install Dependencies

npm install @tylertech/forge @tylertech/forge-angular
  • @tylertech/forge - The core Web Components library (framework-agnostic)
  • @tylertech/forge-angular - The Angular adapter library (this package)

2. Import Global Styles

Add the Forge stylesheet to your styles.scss:

@use '@tylertech/forge/dist/forge.css';

Alternatively, add it to your angular.json:

"styles": [
  "node_modules/@tylertech/forge/dist/forge.css",
  "src/styles.scss"
]

3. Add Typography Class

Add the forge-typography class to your <body> element in index.html:

<body class="forge-typography">
  <app-root></app-root>
</body>

This applies Forge typography styles across your application.

4. Import Component Modules

Import the Angular modules for each Forge component you use:

import { ForgeButtonModule } from '@tylertech/forge-angular/button';
import { ForgeTextFieldModule } from '@tylertech/forge-angular/text-field';

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

Usage

Basic Component Usage

import { Component } from '@angular/core';
import { ForgeButtonModule } from '@tylertech/forge-angular/button';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ForgeButtonModule],
  template: `
    <forge-button type="raised" (click)="handleClick()">
      Click Me
    </forge-button>
  `
})
export class ExampleComponent {
  handleClick() {
    console.log('Button clicked!');
  }
}

Form Integration

The library provides seamless integration with Angular Forms:

Reactive Forms

import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { ForgeTextFieldModule } from '@tylertech/forge-angular/text-field';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [ReactiveFormsModule, ForgeTextFieldModule],
  template: `
    <form [formGroup]="form">
      <forge-text-field>
        <input type="text" formControlName="username" />
        <label>Username</label>
      </forge-text-field>
    </form>
  `
})
export class FormComponent {
  form = this.fb.group({
    username: ['']
  });

  constructor(private fb: FormBuilder) {}
}

Template-Driven Forms

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ForgeTextFieldModule } from '@tylertech/forge-angular/text-field';

@Component({
  selector: 'app-template-form',
  standalone: true,
  imports: [FormsModule, ForgeTextFieldModule],
  template: `
    <forge-text-field>
      <input type="text" [(ngModel)]="username" name="username" />
      <label>Username</label>
    </forge-text-field>
  `
})
export class TemplateFormComponent {
  username = '';
}

Documentation

For complete documentation on Forge components, visit the Forge Design System.

Contributing

Contributions are welcome! Please see the Contributing Guide for details on development setup, testing, and the release process.

License

This project is licensed under the Apache License 2.0.

FAQs

Package last updated on 02 Apr 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Code You Didn't Write Is Still Yours to Defend

Security News

The Code You Didn't Write Is Still Yours to Defend

AI agents are pulling packages into environments no scanner is watching, creating exposure before security teams can see it.

By Brad Arkin  -  Jun 23, 2026