@qontu/ngx-inline-editor

<!DOCTYPE html>
<html>
  <head>
    <title>@qontu/ngx-inline-editor</title>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.12/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.12/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/@qontu/ngx-inline-editor/themes/bootstrap.css" />
    <script>
      System.import('app').catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

# Minimal Angular skeleton

Nothing like ridiculously over-engineered Angular's "QuickStart example on Plunker" - just simple sandbox.

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'app': './src',
    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    'rxjs': 'https://unpkg.com/rxjs',
    'typescript': 'https://unpkg.com/typescript@2.2.1/lib/typescript.js',
    '@qontu/ngx-inline-editor': 'https://npmcdn.com/@qontu/ngx-inline-editor@0.2.0-alpha.9',
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {InlineEditorModule} from '@qontu/ngx-inline-editor';
import {AppComponent} from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    InlineEditorModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

import {NgModule, Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1> {{test}} </h1>
    <div>
        <inline-editor 
            type="text" 
            [(ngModel)]="test">
        </inline-editor>
    </div>
  `
})
export class AppComponent {
  test = "Click me!"
}