@wawjs/ngx-ace

ngx-ace is the extracted Ace editor package from the Web Art Work Angular packages workspace.

Installation

npm i --save @wawjs/ngx-ace

Usage

import { provideNgxAce } from '@wawjs/ngx-ace';

export const appConfig = {
	providers: [
		provideNgxAce({
			mode: 'javascript',
			theme: 'github',
			useWorker: false,
		}),
	],
};

Available features

• AceComponent for template-friendly editor embedding
• AceDirective for direct editor instance control
• provideNgxAce() for default config registration
• registerAceMode() and registerAceTheme() for lazy feature loading
• AceConfigInterface, AceConfig, and related types

Accessibility

• Pass [ariaLabel]="'...'" on AceComponent (or AceDirective) to give the editor an accessible name. It is applied both as a host aria-label and, once the editor initializes, as aria-label on Ace's own hidden text input so screen readers announce it correctly.

AI Coding Agents

This package includes AI.md with copyable instructions for Codex, Claude Code, Cursor, and other coding agents.

Copy this into the consuming project's AGENTS.md, CLAUDE.md, or equivalent file:

- This Angular project uses `@wawjs/ngx-ace` for Ace editor integration.
- Import public APIs from `@wawjs/ngx-ace`.
- Prefer `provideNgxAce({...})` for editor defaults.
- Prefer `AceComponent` for template usage and `AceDirective` for direct editor control.
- Use `registerAceMode()` and `registerAceTheme()` for lazy mode/theme registration.
- Keep browser-only editor behavior SSR-safe.