ngx-ace-signal

ngx-ace-signal

ngx-ace-signal is a modern Angular signals-based wrapper for the Ace Editor.

It is designed for Angular 20+, supports SSR, and avoids legacy patterns like NgModule, @Input(), or global side effects.

Features

• ✅ Angular signals API (input(), model(), output())
• ✅ SSR-safe − Ace is only loaded in the browser
• ✅ Dynamic mode & theme loading
• ✅ Component and directive APIs
• ✅ Fully typed config (AceConfigInterface)
• ✅ Works with standalone apps

Demo

Example application (GitHub Pages): 👉 https://ace.webart.work

Installation

npm install ngx-ace-signal

Basic usage (component)

<ace [(value)]="code" [mode]="'javascript'" [theme]="'github'"></ace>

code = `console.log("Hello Ace");`;

Inputs (signals)

Input	Type	Default	Description
value	string	""	Editor content (two-way via model())
mode	"text" | "javascript" | string	""	Editor mode
theme	"github" | "clouds" | string	""	Editor theme
disabled	boolean	false	Disables editor
readOnly	boolean	false	Read-only mode
config	AceConfigInterface	undefined	Advanced Ace options
useAceClass	boolean	true	Toggles .ace host class

Outputs

<ace (change)="onChange($event)" (focus)="onFocus()" (blur)="onBlur()"></ace>

Supported events:

• blur
• focus
• copy
• paste
• change
• changeCursor
• changeSession
• changeSelection

Directive usage (advanced)

<div ace [mode]="'text'" [theme]="'clouds'" [config]="options">
	initial text
</div>

Access the editor API via template reference:

<div ace #editor="ngxAce"></div>

editor.ace()?.setValue("Hello");

Global configuration (optional)

Use provideAce() to define defaults once:

import { provideAce } from "ngx-ace-signal";

bootstrapApplication(AppComponent, {
	providers: [
		provideAce({
			showLineNumbers: true,
			useWorker: false,
		}),
	],
});

Dynamic mode & theme registration

You can extend supported modes/themes without touching the library:

import { registerAceMode, registerAceTheme } from "ngx-ace-signal";

registerAceMode("json", () => import("ace-builds/src-noconflict/mode-json"));

registerAceTheme(
	"monokai",
	() => import("ace-builds/src-noconflict/theme-monokai")
);

Then use them normally:

<ace mode="json" theme="monokai"></ace>

SSR support

• Ace is never imported on the server
• All loading happens behind isPlatformBrowser
• Safe to use in Angular Universal / SSR apps

No special setup required.

Configuration reference

All supported options are defined in:

AceConfigInterface;

This is a thin typed layer over Ace’s native configuration. For full option details, see the official Ace documentation:

👉 https://ace.c9.io/#nav-api

Notes on CommonJS warnings

ace-builds is CommonJS. Consumer apps should add:

"allowedCommonJsDependencies": ["ace-builds"]

This is expected and documented.

License

MIT © Web Art Work