Angular: Build Code Editor With ACE

What you see is what you get

Photo by Callie Gibson on Unsplash

Steps

1. Install and import ngx-ace-wrapper
2. Write HTML
3. Handle Events

1. Install and import ngx-ace-wrapper

$ npm install ngx-ace-wrapper --save-dev

app.module.ts

import 'brace';
import 'brace/mode/text';
import 'brace/mode/html';
import 'brace/mode/javascript';
import 'brace/mode/css';
import 'brace/theme/github';
import 'brace/theme/clouds';
import { AceModule } from 'ngx-ace-wrapper';
@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [AppComponent ],
  imports: [AceModule, BrowserModule],
  exports: []
})
export class AppModule {}

2. Write HTML

<ace style="height:200px"
  [disabled]="false" 
  [mode]="'html'"
  [theme]="'clouds'"
  [config]="{}"
  [(value)]="content"
  (blur)="log($event, 'blur')" 
  (focus)="log($event, 'focus')" 
  (copy)="log($event, 'copy')" 
  (paste)="log($event, 'paste')" 
  (change)="log($event, 'change')"
  (changeSession)="log($event, 'changeSession')"
  (changeCursor)="log($event, 'changeCursor')"
  (changeSelection)="log($event, 'changeSelection')">
</ace>

https://github.com/ajaxorg/ace/wiki/Configuring-Ace

3. Handle Events

export class AppComponent{
  log(event, txt) {
    console.log('ace event', event);
    document.querySelector('#log').value += `${txt}\n`;
  }
}

Happy coding :)

This article is a part of Angular Random How-Tos. You may find some useful articles for your daily development.

Do you think this useful? If so please;
* Clap 👏 button below️ to let others to see this too.
* Follow Allen on Twitter (@allenhwkim)