SQL Viewer + Editor for Angular CLI

Question

I'm trying to find a solution that would allow me to do nice rendering + editing SQL within an Angular 5/6 CLI application.

Are there any known components or solutions/approaches for implementing this?

Answer 1

Here step for angular cli, for example angular 5:

Installation

1. Install dependency

npm install --save @types/codemirror
npm install --save codemirror

2. Import refference

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql.js';
import { WindowRef } from './WindowRef';

also import style codemirror/lib/codemirror.css into .angular-cli.json:

"styles": [
     "styles.css",
     "codemirror.css"
 ],

last put code mirror:

  CodeMirror.fromTextArea(document.getElementById('code'), {
    mode: mime,
    indentWithTabs: true,
    smartIndent: true,
    lineNumbers: true,
    matchBrackets : true,
    autofocus: true,
    extraKeys: {"Ctrl-Space": "autocomplete"},
    hintOptions: {tables: {
      users: ["name", "score", "birthDate"],
      countries: ["name", "population", "size"]
    }}
  });

Complete code

1. app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql.js';
import { WindowRef } from './WindowRef';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';
  @ViewChild('myEditor') myEditor;

  constructor(private winRef: WindowRef) {
  }

  ngAfterViewInit() {
    const mime = 'text/x-mariadb';
    const currentWindow = this.winRef.nativeWindow;
    // get mime type
    // if (currentWindow.location.href.indexOf('mime=') > -1) {
    //   mime = currentWindow.location.href.substr(currentWindow.location.href.indexOf('mime=') + 5);
    // }
    currentWindow.editor = CodeMirror.fromTextArea(this.myEditor.nativeElement, {
      mode: mime,
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      // matchBrackets: true,
      autofocus: true,
      extraKeys: { 'Ctrl-Space': 'autocomplete' },
      // hintOptions: {
      //   tables: {
      //     users: ['name', 'score', 'birthDate'],
      //     countries: ['name', 'population', 'size']
      //   }
      // }
    });
  }
}

2. app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <form>
    <textarea id="code" name="code" #myEditor>
      -- SQL Mode for CodeMirror
      SELECT SQL_NO_CACHE DISTINCT
        @var1 AS `val1`, @'val2', @global.'sql_mode',
        1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,
        0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,
        DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,
        'my string', _utf8'your string', N'her string',
            TRUE, FALSE, UNKNOWN
      FROM DUAL
      -- space needed after '--'
      # 1 line comment
      /* multiline
      comment! */
      LIMIT 1 OFFSET 0;
    </textarea>
  </form>
</div>

3. WindowRef.ts

import { Injectable } from '@angular/core';

function _window(): any {
    // return the global native browser window object
    return window;
}

@Injectable()
export class WindowRef {
    get nativeWindow(): any {
        return _window();
    }
}

4. app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WindowRef } from './WindowRef';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [WindowRef],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

You could try https://www.npmjs.com/package/ng2-ace-editor.

Ace editor integration with typescript for angular 2.

It is gaining some momentum.