Web Components, more specifically custom elements are not compatible with Angular by default. This requires us to use CUSTOM_ELEMENTS_SCHEMA within our Angular modules to tell Angular not to throw errors when it comes across an HTML element that it doesn't recognize. The problem with this is that we lose some type safety and useful error messages with these elements as we're developing.

Solution

The purpose of this library is to make using Forge Web Components in Angular a seamless experience. It provides ControlValueAccessor directives to enable usage of constructs like formControlName, formControl, and ngModel, as well as auto-generated proxy (wrapper) components for every <forge-*> element in the Forge component library.

To elaborate on the proxy components, these are Angular components that target the element names for every Forge custom HTML element. This allows Angular to provide strict type safety for properties and events as well as intelligent code completion and useful error messages. Each component is exported from its own Angular module to allow for opting in to include only specific components that your Angular application is using.

This enables developers to be able to remove their usage of CUSTOM_ELEMENTS_SCHEMA when using Forge.

Version Compatibility

`@tylertech/forge-angular`	Angular	Forge
`^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`

Getting started

While this library is not required to use Forge with Angular, it is highly recommended. Follow these steps to get started:

Install the latest version of Forge components: npm install @tylertech/forge
- This is the library that contains the framework-agnostic Web Components.
Install the latest version of this Forge Angular adapter library using the version compatibility table above: npm install @tylertech/forge-angular
Reference the Forge global stylesheet in your styles.scss file: @use '@tylertech/forge/dist/forge.css';
- You can also include this file through the angular.json file if desired as well.
Add the forge-typography class to your <body> element in index.html.
- This sets up the Forge typography across your application.
To use a Forge component, you will import the Angular module from @tylertech/forge-angular for each component you are using. Ex. ForgeButtonModule
- This tells Angular about each Forge component you are using, and allows for strict typing that you wouldn't normally get without this library.

FAQs

What is @tylertech/forge-angular?

Is @tylertech/forge-angular popular?

Is @tylertech/forge-angular well maintained?

Package last updated on 17 Sep 2025

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.

Install