Angular Fabric Canvas Package
ngx-fabric
A focused Angular wrapper for Fabric.js with standalone bootstrap, app-wide defaults, and a docs app that keeps theme modes and translations intact.
Use one focused package when you need interactive canvas editing, JSON hydration, and Fabric event bindings without carrying unrelated workspace features in the same library.
landing.ts
Project Overview
Package
ngx-fabric
Fabric canvas building blocks for Angular, extracted into a single-purpose package and documented with the same app shell as the other workspace docs.
License
MIT
Published as a public package and designed for reuse across multiple apps.
Installation
Install the package
$ npm i --save ngx-fabric fabric resize-observer-polyfillUsage
Bootstrap with provideNgxFabric()
import { provideNgxFabric } from 'ngx-fabric';
export const appConfig = {
providers: [provideNgxFabric()],
};Configuration
Define canvas defaults once
Register shared Fabric defaults once instead of repeating selection colors, stacking rules, or rendering behavior in every canvas instance.
import { provideNgxFabric } from 'ngx-fabric';
export const appConfig = {
providers: [
provideNgxFabric({
selectionColor: 'rgba(37, 99, 235, 0.16)',
renderOnAddRemove: true,
preserveObjectStacking: true,
isDrawingMode: false,
}),
],
};Features
What ngx-fabric includes
Bootstrap and defaults
Standalone-first setup centered on provideNgxFabric() with shared canvas defaults registered once.
provideNgxFabric() | FABRIC_CONFIG | shared selection and rendering defaults
Component wrapper
Template-friendly canvas wrapper for teams that want Fabric in markup with minimal wiring.
FabricComponent | [config], [data], [zoom], [disabled] | dataLoaded and Fabric event outputs
Directive control
Low-level directive access for teams that want the raw Fabric instance and imperative helpers.
FabricDirective | fabric(), clear(), render(), loadFromJSON() | setZoom(), setWidth(), setHeight()
Canvas behavior
The wrapper keeps canvas sizing and config reapplication practical for app use.
ResizeObserver-based sizing | interactive Canvas vs StaticCanvas | camelCase Angular bindings for Fabric events
Reference
Documented feature pages
The detailed page below documents the Fabric package public API and the files that make up the feature.