Skip to content

Commit ca3f9ef

Browse files
cyber-haribavi-r
authored andcommitted
docs(monaco-editor): update README.md
1 parent 7954307 commit ca3f9ef

File tree

1 file changed

+11
-12
lines changed

1 file changed

+11
-12
lines changed

packages/monaco-editor/README.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
## Catbee Monaco Editor for Angular
44

5-
> A modern Angular library that seamlessly integrates the Monaco Editor, offering full support for both **single** and **diff** editors — fully compatible with Reactive Forms, Template-driven Forms, and custom data models.
6-
5+
> A modern Angular library that seamlessly integrates the Monaco Editor, offering full support for both **single** and **diff** editors — fully compatible with Reactive Forms, Template-driven Forms, and Signal Forms.
76
87
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0;">
98
<img src="https://github.com/catbee-technologies/ng-catbee/actions/workflows/ci.yml/badge.svg?label=Build" alt="Build Status" />
@@ -31,19 +30,19 @@
3130

3231
- 📝 **Single Editor**: Drop-in Monaco editor for Angular apps
3332
- 🔀 **Diff Editor**: Effortlessly compare code side-by-side
34-
- ⚙️ **Supports Reactive & Template-driven Forms**: (FormControl, ngModel)
33+
- ⚙️ **Supports Reactive, Template-driven & Signal Forms**: (FormControl, ngModel, Signal)
3534
- 🎨 **Customizable**: Language, theme, and editor settings
36-
- 💡 **Custom Model Binding**: ([model] input for flexibility)
3735
- 🎨 **Highly Configurable**: theme, language, layout, options
3836
- 🧠 **Full Type Safety**: with rich TypeScript definitions
3937

4038
## 🧩 Angular Compatibility
4139

42-
| Angular Version | Supported |
43-
| ---------------- | --------- |
44-
| `v17` and above | ✅ Fully supported |
40+
| Angular Version | Supported |
41+
| --------------- | ------------------------------------------------------------ |
42+
| `v17` and above | ✅ Fully supported |
43+
| `v20` & `v21` | ✅ v21 release fully supports both Angular 20 and Angular 21 |
4544

46-
This library is built and tested with Angular `20.3.0`, and supports all modern standalone-based Angular projects (v17+).
45+
This library is built and tested with Angular **20.3.0** and **21.x**, and supports all modern standalone-based Angular projects (v17+).
4746

4847
## 🛠️ Installation
4948

@@ -88,18 +87,19 @@ export class AppModule {}
8887

8988
```typescript
9089
import { Component } from '@angular/core';
91-
import { CatbeeMonacoEditorComponent, MonacoEditorOptions, MonacoEditor, MonacoKeyMod, MonacoKeyCode } from '@ng-catbee/monaco-editor';
90+
import { CatbeeMonacoEditor, MonacoEditorOptions, MonacoEditor, MonacoKeyMod, MonacoKeyCode } from '@ng-catbee/monaco-editor';
9291
import { FormsModule } from '@angular/forms';
9392

9493
@Component({
9594
selector: 'app-root',
96-
imports: [CatbeeMonacoEditorComponent, FormsModule],
95+
imports: [CatbeeMonacoEditor, FormsModule],
9796
template: `
9897
<ng-catbee-monaco-editor
9998
[height]="'400px'"
10099
[width]="'100%'"
101100
[options]="options"
102-
[(ngModel)]="code"
101+
[(ngModel)]="code" or [(value)]="code" or formControlName="code"
102+
[language]="'typescript'"
103103
[placeholder]="'Start typing your code here...'"
104104
(init)="onInit($event)"
105105
(optionsChange)="onOptionsChange($event)"
@@ -108,7 +108,6 @@ import { FormsModule } from '@angular/forms';
108108
})
109109
export class AppComponent {
110110
options: MonacoEditorOptions = {
111-
language: 'typescript',
112111
theme: 'vs-dark',
113112
automaticLayout: true,
114113
minimap: { enabled: false }

0 commit comments

Comments
 (0)