Changed module

Author: ashok1994

package-lock.json

@@ -53,6 +53,7 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@nomadreservations/ngx-codemirror": "^2.0.0",
     "angularjs2-tabs": "0.0.1-beta.1",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
@@ -65,7 +66,7 @@
     "@angular/cli": "1.2.4",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
-    "@ctrl/ngx-codemirror": "^1.3.7",
+    "@types/codemirror": "0.0.58",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

package.json

@@ -290,7 +290,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv" id="c1">
-                      <ngx-codemirror [(ngModel)]="installCode" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="installCode" [config]="{ 
                                         lineNumbers: true,
                                         theme:'dracula', 
                                         tabSize: '4',
@@ -310,7 +310,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv" id="c2">
-                      <ngx-codemirror [(ngModel)]="installFusionCharts" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="installFusionCharts" [config]="{ 
                                         lineNumbers: true,
                                         theme:'dracula', 
                                         tabSize: '4',
@@ -345,7 +345,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv" id="c3">
-                      <ngx-codemirror [(ngModel)]="includeInModule" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="includeInModule" [config]="{ 
                                 lineNumbers: true,
                                 theme:'dracula', 
                                 tabSize: '4',
@@ -378,7 +378,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv">
-                      <ngx-codemirror [(ngModel)]="useDirective" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="useDirective" [config]="{ 
                                       lineNumbers: true,
                                       theme:'dracula', 
                                       tabSize: '4',
@@ -416,7 +416,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv" id="c3">
-                      <ngx-codemirror [(ngModel)]="renderFusionMaps" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="renderFusionMaps" [config]="{ 
                                     lineNumbers: true,
                                     theme:'dracula', 
                                     tabSize: '4',
@@ -440,7 +440,7 @@
                 <div class="card-body p-0">
                   <div class="code-panel">
                     <div class="codeMirrorDiv" id="c3">
-                      <ngx-codemirror [(ngModel)]="mapHtml" [options]="{ 
+                      <ngx-codemirror [(ngModel)]="mapHtml" [config]="{ 
                                         lineNumbers: true,
                                         theme:'dracula', 
                                         tabSize: '4',

src/app/app.component.html

@@ -9,7 +9,7 @@ import { HttpModule } from '@angular/http';
 
 import { CodePrev } from './fusioncharts/codepreview';
 import { TabsModule } from "angularjs2-tabs";
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { CodemirrorModule } from '@nomadreservations/ngx-codemirror';
 
 import { Ex1 } from './fusioncharts/ex1/ex1';
 import { Ex2 } from './fusioncharts/ex2/ex2';

src/app/app.module.ts

@@ -3,6 +3,8 @@ import {
   Input
 } from '@angular/core';
 
+import { CodemirrorService } from '@nomadreservations/ngx-codemirror';
+
 
 @Component({
   selector:'tabbed-code',
@@ -14,7 +16,11 @@ export default class TabbedCode {
   @Input() templateCode;
   cSelected = 'component';
 
-  constructor () {}
+  constructor (private _codeMirror: CodemirrorService) {}
+
+  ngOnInit(){
+    // this._codeMirror.instance$.subscribe( )
+  }
 
   selectCode(type){
     this.cSelected = type;

src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts

@@ -11,7 +11,7 @@
             <div id="chartCode">
               <div [ngSwitch]="cSelected">
                 <div *ngSwitchCase="'module'">
-                  <ngx-codemirror [(ngModel)]="moduleCode" [options]="{ 
+                  <ngx-codemirror [(ngModel)]="moduleCode" [config]="{ 
                       lineNumbers: true,
                       theme:'dracula', 
                       tabSize: '4',
@@ -21,7 +21,7 @@
                   }"></ngx-codemirror>
                 </div>
                 <div *ngSwitchCase="'component'">
-                    <ngx-codemirror [(ngModel)]="componentCode" [options]="{ 
+                    <ngx-codemirror [(ngModel)]="componentCode" [config]="{ 
                       lineNumbers: true,
                       theme:'dracula', 
                       tabSize: '4',
@@ -31,7 +31,7 @@
                   }"></ngx-codemirror>
                 </div>
                 <div *ngSwitchCase="'template'">
-                  <ngx-codemirror [(ngModel)]="templateCode" [options]="{ 
+                  <ngx-codemirror [(ngModel)]="templateCode" [config]="{ 
                       lineNumbers: true,
                       theme:'dracula', 
                       tabSize: '4',