Example of a completion provider for ngx-monaco

ml-completion.provider.ts

import { Injectable } from '@angular/core';
import { CompletionItemProvider } from 'ngx-monaco';

interface PropertyValue {
	name: string;
	description?: string;
}

interface Property {
	name: string;
	description?: string;
	values: PropertyValue[];
}

const properties: Property[] = [
	{
		name: 'dockerImageId',
		description: 'Specifies docker container environment for lab execution.',
		values: [
			{
				name: 'keras_v2-0-x_python_2-1',
				description: 'Keras 2.0.x and Python 2.1'
			},
			{
				name: 'keras_v2-0-x_python_3-1',
				description: 'Keras 2.0.x and Python 3.1'
			},
			{
				name: 'tensorflow_v1-4-x-gpu_python_3-1',
				description: 'GPU-enabled Tensorflow 1.4.x, Keras 2.1.x and Python 3.1'
			},
			{
				name: 'tensorflow_v1-4-x-gpu_python_2-1',
				description: 'GPU-enabled Tensorflow 1.4.x, Keras 2.1.x and Python 2.1'
			}
		]
	},
	{
		name: 'hardwareType',
		description: 'Sets the hardware on which your lab is executed. This can be either cpu (default) or gpu.',
		values: [
			{
				name: 'cpu'
			},
			{
				name: 'gpu',
				description: 'Run the lab on a GPU-accelerated machine.'
			}
		]
	},
	{
		name: 'inputs',
		description: 'Specifies which data(sets) need to be downloaded before the lab executes.',
		values: []
	},
	{
		name: 'parameters',
		description: 'A list of parameters that will be passed to our entry file (e.g. main.py) in the same order they are specified.',
		values: []
	}
];

const keywords = new Map<string, Property>(properties.map<[string, Property]>(property => [property.name, property]));

@Injectable()
export class MLCompletionService implements CompletionItemProvider {
	get language() {
		return 'yaml';
	}

	provideCompletionItems(model: monaco.editor.IReadOnlyModel, position: monaco.Position): any {
		const filename = model.uri.path.split('/').pop();

		if (filename !== 'ml.yaml') {
			return [];
		}

		const textUntilPosition = model.getValueInRange({
			startLineNumber: position.lineNumber,
			startColumn: 1,
			endLineNumber: position.lineNumber,
			endColumn: position.column
		});

		const [keyword, value] = textUntilPosition.split(':').map(x => x.trim());
		const suggestions = keywords.get(keyword);

		if (suggestions) {
			return suggestions.values.map(x => ({
				label: x.name,
				kind: monaco.languages.CompletionItemKind.Enum,
				insertText: ` ${x.name}`,
				documentation: x.description,
				range: {
					startLineNumber: position.lineNumber,
					startColumn: keyword.length + 2,
					endLineNumber: position.lineNumber,
					endColumn: position.column
				}
			}));
		}

		return Array.from(keywords.values()).map(property => ({
			label: property.name,
			kind: monaco.languages.CompletionItemKind.Property,
			documentation: property.description,
			insertText: `${property.name}: `
		}));
	}
}