@tylertech/forge-angular
Advanced tools
An Angular adapter library for the Tyler Forge™ Web Components library.
This library provides seamless integration between Angular and Tyler Forge Web Components, enabling type-safe usage of Forge components in Angular applications.
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:
@tylertech/forge-angular provides:
Auto-generated Proxy Components - Strongly-typed Angular components wrapping each <forge-*> element with:
ControlValueAccessor Directives - Seamless integration with Angular Forms:
formControlName supportformControl bindingngModel two-way bindingTree-shakable Modules - Each component is exported from its own module, allowing you to include only what you use.
Result: Remove
CUSTOM_ELEMENTS_SCHEMAand enjoy a fully type-safe Angular development experience with Forge components.
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-angular | Angular | Forge |
|---|---|---|
^8.0.0 | >=20.0.0 < 23.0.0 | ^3.14.0 |
^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 |
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)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"
]
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.
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 { }
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!');
}
}
The library provides seamless integration with Angular 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) {}
}
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 = '';
}
For complete documentation on Forge components, visit the Forge Design System.
Contributions are welcome! Please see the Contributing Guide for details on development setup, testing, and the release process.
This project is licensed under the Apache License 2.0.
FAQs
Forge components adapter library for Angular
The npm package @tylertech/forge-angular receives a total of 893 weekly downloads. As such, @tylertech/forge-angular popularity was classified as not popular.
We found that @tylertech/forge-angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
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.
Security News
npm v12 is generally available, turning install scripts off by default and beginning the deprecation of 2FA-bypass publishing tokens.
Research
/Security News
Socket tracks the activity as Operation “Muck and Load”: a threat actor uses commit-farming workflows, public dead drops, and protected archives to stage Windows RAT and infostealer malware.
Security News
pnpm 11.10 hardens registry auth to block token redirection, tightens pack-app and deploy, and makes the Rust port (v12) installable.