Could use Monaco editor. It's open source and has been easy to work with ime and is feature rich https://github.com/microsoft/monaco-editor Edit: added GitHub link More on reddit.com

I think you're looking for formly: https://formly.dev/ More on reddit.com

You can use the i18nSelectPipe or https://github.com/ngx-translate/core More on reddit.com

Ace Editor is an amazing piece of work, but takes a bit of getting used to. I'm using ng2-ace-editor in my project and loading languages and themes using brace. I don't have anything fancy like autocomplete (I'm planning to include it in the future though). If you want to use the search function you'll need to import it. Here's what I'm doing: Component Imports: import { AceEditorComponent } from 'ng2-ace-editor'; import 'brace'; import '../../model/brace-language'; import '../../model/brace-config'; import 'brace/ext/searchbox'; brace-language is my customer 'mode' (how Ace handles the code being entered, e.g. JS, Java). I'm using a custom language my company's developed, so the file's not much use to you. The brace-config is the style for the editor I've customised. You can use any of the themes or language files in brace by importing them instead. Writing your own language mode is a bit tricky but styling the editor is easy enough. Here's a summary of my implementation Using @ViewChild (as u/kuroiryu recommended) @ViewChild('editField') editField: AceEditorComponent; Defining the Ace Editor options: public options = { animatedScroll: true, enableBasicAutocompletion: true, showPrintMargin: false, tabSize: 2, useSoftTabs: true }; In the template: Note that the reference to mode is whatever is made available by your language import (where I imported brace-language). In the language mode file I've got a reference like this, that gives me myCustomMode: ace.define('ace/mode/myCustomMode'); More on reddit.com