Autocomplete JSON with Angular and Monaco

Make web native coding a feature, not a bug

Jonathan Scott
Published in
4 min readDec 9, 2020

--

Microsoft’s VS Code has grown in popularity over recent years, which is attributed to the Monaco Editor. The Monaco Editor provides essential productivity plugins and features, including: autocomplete. These features are considered IntelliSense, which is a general name for any coding feature that assists the developer. Here is a better description of the Monaco Editor features.

Microsoft made the code for the Monaco Editor open source, which means that the beloved VS Code IntelliSense features can, and have been, ported to other platforms. Thanks to atularen, there is a reliable way to integrate the Monaco Editor with Angular 2 and above. This guide will use the ngx-monaco-editor package to enable the autocompletion feature for a given JSON schema.

The code for this tutorial is publicly available here.

Note:
This guide has only been validated for Angular CLI 9.1.12.

Directory Structure Reference

The following file tree is for your reference. Magenta boxed files will be edited in this tutorial.

Prerequisites

Setup

A more complete installation guide is available here, but the following is what this tutorial requires.

Create a project

Create a new project and cd within it.

ng new ngx-monaco-json-intellisense && cd ngx-monaco-json-intellisense

Install the Monaco Editor package

npm install ngx-monaco-editor@9.0.0 --save

Edit angular.json

Add the glob to angular.json like in the following truncated example.

--

--