Fix

dist/ngx-flowchart/bundles/ngx-flowchart.umd.js

@@ -257,16 +257,6 @@
         /** @type {?|undefined} */
         FcCoords.prototype.y;
     }
-    /**
-     * @record
-     */
-    function FcOffset() { }
-    if (false) {
-        /** @type {?} */
-        FcOffset.prototype.top;
-        /** @type {?} */
-        FcOffset.prototype.left;
-    }
     /**
      * @record
      */
@@ -557,7 +547,7 @@
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var FcModelService = /** @class */ (function () {
-        function FcModelService(modelValidation, model, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+        function FcModelService(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
             this.connectorsHtmlElements = {};
             this.nodesHtmlElements = {};
             this.canvasHtmlElement = null;
@@ -565,6 +555,7 @@
             this.svgHtmlElement = null;
             this.modelValidation = modelValidation;
             this.model = model;
+            this.modelChanged = modelChanged;
             this.cd = cd;
             this.canvasHtmlElement = canvasHtmlElement;
             this.svgHtmlElement = svgHtmlElement;
@@ -596,6 +587,15 @@
             this.nodes = new NodesModel(this);
             this.edges = new EdgesModel(this);
         }
+        /**
+         * @return {?}
+         */
+        FcModelService.prototype.notifyModelChanged = /**
+         * @return {?}
+         */
+        function () {
+            this.modelChanged.emit();
+        };
         /**
          * @return {?}
          */
@@ -986,6 +986,8 @@
         /** @type {?} */
         FcModelService.prototype.dropTargetId;
         /** @type {?} */
+        FcModelService.prototype.modelChanged;
+        /** @type {?} */
         FcModelService.prototype.connectors;
         /** @type {?} */
         FcModelService.prototype.nodes;
@@ -1279,6 +1281,7 @@
                 }
             }
             model.nodes.splice(index, 1);
+            this.modelService.notifyModelChanged();
             this.modelService.nodeRemovedCallback(node);
         };
         /**
@@ -1477,6 +1480,7 @@
                 this.deselect(edge);
             }
             model.edges.splice(index, 1);
+            this.modelService.notifyModelChanged();
             this.modelService.edgeRemovedCallback(edge);
         };
         /**
@@ -1528,6 +1532,7 @@
             /** @type {?} */
             var model = this.modelService.model;
             model.edges.push(edge);
+            this.modelService.notifyModelChanged();
         };
         /**
          * @param {?} event
@@ -1561,6 +1566,7 @@
              */
             function (created) {
                 model.edges.push(created);
+                _this.modelService.notifyModelChanged();
                 _this.modelService.edgeAddedCallback(created);
             }));
         };
@@ -2127,6 +2133,7 @@
                         draggedNode.y = Math.round(_this.getYCoordinate(dragOffset.y + event.clientY));
                     }
                     event.preventDefault();
+                    _this.modelService.notifyModelChanged();
                     return false;
                 }));
             }
@@ -2182,6 +2189,7 @@
                             _this.resizeCanvas(draggedNode, _this.draggedElements[i]);
                         }
                         event.preventDefault();
+                        _this.modelService.notifyModelChanged();
                         return false;
                     }));
                 }
@@ -2244,6 +2252,7 @@
                         _this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
                     }
                     _this.nodeDraggingScope.shadowElements.length = 0;
+                    _this.modelService.notifyModelChanged();
                 }
                 if (_this.nodeDraggingScope.draggedNodes.length) {
                     _this.nodeDraggingScope.draggedNodes.length = 0;
@@ -3292,6 +3301,7 @@
             this.edgeDrawingService = edgeDrawingService;
             this.cd = cd;
             this.zone = zone;
+            this.modelChanged = new core.EventEmitter();
             this.flowchartConstants = FlowchartConstants;
             this.nodesDiffer = this.differs.find([]).create((/**
              * @param {?} index
@@ -3359,7 +3369,7 @@
             this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
             /** @type {?} */
             var element = $(this.elementRef.nativeElement);
-            this.modelService = new FcModelService(this.modelValidation, this.model, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+            this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
             if (this.dropTargetId) {
                 this.modelService.dropTargetId = this.dropTargetId;
             }
@@ -3710,6 +3720,7 @@
             nodeWidth: [{ type: core.Input }],
             nodeHeight: [{ type: core.Input }],
             dropTargetId: [{ type: core.Input }],
+            modelChanged: [{ type: core.Output }],
             dragover: [{ type: core.HostListener, args: ['dragover', ['$event'],] }],
             drop: [{ type: core.HostListener, args: ['drop', ['$event'],] }],
             mousedown: [{ type: core.HostListener, args: ['mousedown', ['$event'],] }],
@@ -3738,6 +3749,8 @@
         /** @type {?} */
         NgxFlowchartComponent.prototype.dropTargetId;
         /** @type {?} */
+        NgxFlowchartComponent.prototype.modelChanged;
+        /** @type {?} */
         NgxFlowchartComponent.prototype.callbacks;
         /** @type {?} */
         NgxFlowchartComponent.prototype.userNodeCallbacks;

dist/ngx-flowchart/fesm2015/ngx-flowchart.js

-import { InjectionToken, Injectable, Component, ChangeDetectionStrategy, ElementRef, IterableDiffers, ChangeDetectorRef, NgZone, HostBinding, Input, HostListener, Directive, Inject, ComponentFactoryResolver, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, IterableDiffers, ChangeDetectorRef, NgZone, HostBinding, Input, Output, HostListener, Directive, Inject, ComponentFactoryResolver, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
 import { of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
@@ -58,16 +58,6 @@ if (false) {
     /** @type {?|undefined} */
     FcCoords.prototype.y;
 }
-/**
- * @record
- */
-function FcOffset() { }
-if (false) {
-    /** @type {?} */
-    FcOffset.prototype.top;
-    /** @type {?} */
-    FcOffset.prototype.left;
-}
 /**
  * @record
  */
@@ -339,6 +329,7 @@ class FcModelService {
     /**
      * @param {?} modelValidation
      * @param {?} model
+     * @param {?} modelChanged
      * @param {?} cd
      * @param {?} selectedObjects
      * @param {?} dropNode
@@ -349,7 +340,7 @@ class FcModelService {
      * @param {?} canvasHtmlElement
      * @param {?} svgHtmlElement
      */
-    constructor(modelValidation, model, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+    constructor(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
         this.connectorsHtmlElements = {};
         this.nodesHtmlElements = {};
         this.canvasHtmlElement = null;
@@ -357,6 +348,7 @@ class FcModelService {
         this.svgHtmlElement = null;
         this.modelValidation = modelValidation;
         this.model = model;
+        this.modelChanged = modelChanged;
         this.cd = cd;
         this.canvasHtmlElement = canvasHtmlElement;
         this.svgHtmlElement = svgHtmlElement;
@@ -388,6 +380,12 @@ class FcModelService {
         this.nodes = new NodesModel(this);
         this.edges = new EdgesModel(this);
     }
+    /**
+     * @return {?}
+     */
+    notifyModelChanged() {
+        this.modelChanged.emit();
+    }
     /**
      * @return {?}
      */
@@ -689,6 +687,8 @@ if (false) {
     /** @type {?} */
     FcModelService.prototype.dropTargetId;
     /** @type {?} */
+    FcModelService.prototype.modelChanged;
+    /** @type {?} */
     FcModelService.prototype.connectors;
     /** @type {?} */
     FcModelService.prototype.nodes;
@@ -901,6 +901,7 @@ class NodesModel extends AbstractFcModel {
             }
         }
         model.nodes.splice(index, 1);
+        this.modelService.notifyModelChanged();
         this.modelService.nodeRemovedCallback(node);
     }
     /**
@@ -1042,6 +1043,7 @@ class EdgesModel extends AbstractFcModel {
             this.deselect(edge);
         }
         model.edges.splice(index, 1);
+        this.modelService.notifyModelChanged();
         this.modelService.edgeRemovedCallback(edge);
     }
     /**
@@ -1080,6 +1082,7 @@ class EdgesModel extends AbstractFcModel {
         /** @type {?} */
         const model = this.modelService.model;
         model.edges.push(edge);
+        this.modelService.notifyModelChanged();
     }
     /**
      * @param {?} event
@@ -1105,6 +1108,7 @@ class EdgesModel extends AbstractFcModel {
          */
         (created) => {
             model.edges.push(created);
+            this.modelService.notifyModelChanged();
             this.modelService.edgeAddedCallback(created);
         }));
     }
@@ -1576,6 +1580,7 @@ class FcNodeDraggingService {
                     draggedNode.y = Math.round(this.getYCoordinate(dragOffset.y + event.clientY));
                 }
                 event.preventDefault();
+                this.modelService.notifyModelChanged();
                 return false;
             }));
         }
@@ -1626,6 +1631,7 @@ class FcNodeDraggingService {
                         this.resizeCanvas(draggedNode, this.draggedElements[i]);
                     }
                     event.preventDefault();
+                    this.modelService.notifyModelChanged();
                     return false;
                 }));
             }
@@ -1683,6 +1689,7 @@ class FcNodeDraggingService {
                     this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
                 }
                 this.nodeDraggingScope.shadowElements.length = 0;
+                this.modelService.notifyModelChanged();
             }
             if (this.nodeDraggingScope.draggedNodes.length) {
                 this.nodeDraggingScope.draggedNodes.length = 0;
@@ -2603,6 +2610,7 @@ class NgxFlowchartComponent {
         this.edgeDrawingService = edgeDrawingService;
         this.cd = cd;
         this.zone = zone;
+        this.modelChanged = new EventEmitter();
         this.flowchartConstants = FlowchartConstants;
         this.nodesDiffer = this.differs.find([]).create((/**
          * @param {?} index
@@ -2651,7 +2659,7 @@ class NgxFlowchartComponent {
         this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
         /** @type {?} */
         const element = $(this.elementRef.nativeElement);
-        this.modelService = new FcModelService(this.modelValidation, this.model, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
         if (this.dropTargetId) {
             this.modelService.dropTargetId = this.dropTargetId;
         }
@@ -2927,6 +2935,7 @@ NgxFlowchartComponent.propDecorators = {
     nodeWidth: [{ type: Input }],
     nodeHeight: [{ type: Input }],
     dropTargetId: [{ type: Input }],
+    modelChanged: [{ type: Output }],
     dragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
     drop: [{ type: HostListener, args: ['drop', ['$event'],] }],
     mousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
@@ -2953,6 +2962,8 @@ if (false) {
     /** @type {?} */
     NgxFlowchartComponent.prototype.dropTargetId;
     /** @type {?} */
+    NgxFlowchartComponent.prototype.modelChanged;
+    /** @type {?} */
     NgxFlowchartComponent.prototype.callbacks;
     /** @type {?} */
     NgxFlowchartComponent.prototype.userNodeCallbacks;

dist/ngx-flowchart/fesm5/ngx-flowchart.js

 import { __extends, __values, __assign } from 'tslib';
-import { InjectionToken, Injectable, Component, ChangeDetectionStrategy, ElementRef, IterableDiffers, ChangeDetectorRef, NgZone, HostBinding, Input, HostListener, Directive, Inject, ComponentFactoryResolver, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, IterableDiffers, ChangeDetectorRef, NgZone, HostBinding, Input, Output, HostListener, Directive, Inject, ComponentFactoryResolver, ViewChild, ViewContainerRef, NgModule } from '@angular/core';
 import { of } from 'rxjs';
 import { CommonModule } from '@angular/common';
 
@@ -59,16 +59,6 @@ if (false) {
     /** @type {?|undefined} */
     FcCoords.prototype.y;
 }
-/**
- * @record
- */
-function FcOffset() { }
-if (false) {
-    /** @type {?} */
-    FcOffset.prototype.top;
-    /** @type {?} */
-    FcOffset.prototype.left;
-}
 /**
  * @record
  */
@@ -359,7 +349,7 @@ function fcTopSort(graph) {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FcModelService = /** @class */ (function () {
-    function FcModelService(modelValidation, model, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
+    function FcModelService(modelValidation, model, modelChanged, cd, selectedObjects, dropNode, createEdge, edgeAddedCallback, nodeRemovedCallback, edgeRemovedCallback, canvasHtmlElement, svgHtmlElement) {
         this.connectorsHtmlElements = {};
         this.nodesHtmlElements = {};
         this.canvasHtmlElement = null;
@@ -367,6 +357,7 @@ var FcModelService = /** @class */ (function () {
         this.svgHtmlElement = null;
         this.modelValidation = modelValidation;
         this.model = model;
+        this.modelChanged = modelChanged;
         this.cd = cd;
         this.canvasHtmlElement = canvasHtmlElement;
         this.svgHtmlElement = svgHtmlElement;
@@ -398,6 +389,15 @@ var FcModelService = /** @class */ (function () {
         this.nodes = new NodesModel(this);
         this.edges = new EdgesModel(this);
     }
+    /**
+     * @return {?}
+     */
+    FcModelService.prototype.notifyModelChanged = /**
+     * @return {?}
+     */
+    function () {
+        this.modelChanged.emit();
+    };
     /**
      * @return {?}
      */
@@ -788,6 +788,8 @@ if (false) {
     /** @type {?} */
     FcModelService.prototype.dropTargetId;
     /** @type {?} */
+    FcModelService.prototype.modelChanged;
+    /** @type {?} */
     FcModelService.prototype.connectors;
     /** @type {?} */
     FcModelService.prototype.nodes;
@@ -1081,6 +1083,7 @@ var NodesModel = /** @class */ (function (_super) {
             }
         }
         model.nodes.splice(index, 1);
+        this.modelService.notifyModelChanged();
         this.modelService.nodeRemovedCallback(node);
     };
     /**
@@ -1279,6 +1282,7 @@ var EdgesModel = /** @class */ (function (_super) {
             this.deselect(edge);
         }
         model.edges.splice(index, 1);
+        this.modelService.notifyModelChanged();
         this.modelService.edgeRemovedCallback(edge);
     };
     /**
@@ -1330,6 +1334,7 @@ var EdgesModel = /** @class */ (function (_super) {
         /** @type {?} */
         var model = this.modelService.model;
         model.edges.push(edge);
+        this.modelService.notifyModelChanged();
     };
     /**
      * @param {?} event
@@ -1363,6 +1368,7 @@ var EdgesModel = /** @class */ (function (_super) {
          */
         function (created) {
             model.edges.push(created);
+            _this.modelService.notifyModelChanged();
             _this.modelService.edgeAddedCallback(created);
         }));
     };
@@ -1929,6 +1935,7 @@ var FcNodeDraggingService = /** @class */ (function () {
                     draggedNode.y = Math.round(_this.getYCoordinate(dragOffset.y + event.clientY));
                 }
                 event.preventDefault();
+                _this.modelService.notifyModelChanged();
                 return false;
             }));
         }
@@ -1984,6 +1991,7 @@ var FcNodeDraggingService = /** @class */ (function () {
                         _this.resizeCanvas(draggedNode, _this.draggedElements[i]);
                     }
                     event.preventDefault();
+                    _this.modelService.notifyModelChanged();
                     return false;
                 }));
             }
@@ -2046,6 +2054,7 @@ var FcNodeDraggingService = /** @class */ (function () {
                     _this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
                 }
                 _this.nodeDraggingScope.shadowElements.length = 0;
+                _this.modelService.notifyModelChanged();
             }
             if (_this.nodeDraggingScope.draggedNodes.length) {
                 _this.nodeDraggingScope.draggedNodes.length = 0;
@@ -3094,6 +3103,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
         this.edgeDrawingService = edgeDrawingService;
         this.cd = cd;
         this.zone = zone;
+        this.modelChanged = new EventEmitter();
         this.flowchartConstants = FlowchartConstants;
         this.nodesDiffer = this.differs.find([]).create((/**
          * @param {?} index
@@ -3161,7 +3171,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
         this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
         /** @type {?} */
         var element = $(this.elementRef.nativeElement);
-        this.modelService = new FcModelService(this.modelValidation, this.model, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
+        this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects, this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved, this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
         if (this.dropTargetId) {
             this.modelService.dropTargetId = this.dropTargetId;
         }
@@ -3512,6 +3522,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
         nodeWidth: [{ type: Input }],
         nodeHeight: [{ type: Input }],
         dropTargetId: [{ type: Input }],
+        modelChanged: [{ type: Output }],
         dragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
         drop: [{ type: HostListener, args: ['drop', ['$event'],] }],
         mousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
@@ -3540,6 +3551,8 @@ if (false) {
     /** @type {?} */
     NgxFlowchartComponent.prototype.dropTargetId;
     /** @type {?} */
+    NgxFlowchartComponent.prototype.modelChanged;
+    /** @type {?} */
     NgxFlowchartComponent.prototype.callbacks;
     /** @type {?} */
     NgxFlowchartComponent.prototype.userNodeCallbacks;

dist/ngx-flowchart/lib/model.service.d.ts

 import { FcModelValidationService } from './modelvalidation.service';
 import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
 import { Observable } from 'rxjs';
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 export declare class FcModelService {
     modelValidation: FcModelValidationService;
     model: FcModel;
@@ -18,10 +18,12 @@ export declare class FcModelService {
     nodeRemovedCallback: (node: FcNode) => void;
     edgeRemovedCallback: (edge: FcEdge) => void;
     dropTargetId: string;
+    modelChanged: EventEmitter<any>;
     connectors: ConnectorsModel;
     nodes: NodesModel;
     edges: EdgesModel;
-    constructor(modelValidation: FcModelValidationService, model: FcModel, cd: ChangeDetectorRef, selectedObjects: any[], dropNode: (event: Event, node: FcNode) => void, createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>, edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void, canvasHtmlElement: HTMLElement, svgHtmlElement: SVGElement);
+    constructor(modelValidation: FcModelValidationService, model: FcModel, modelChanged: EventEmitter<any>, cd: ChangeDetectorRef, selectedObjects: any[], dropNode: (event: Event, node: FcNode) => void, createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>, edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void, canvasHtmlElement: HTMLElement, svgHtmlElement: SVGElement);
+    notifyModelChanged(): void;
     detectChanges(): void;
     selectObject(object: any): void;
     deselectObject(object: any): void;

dist/ngx-flowchart/lib/ngx-flowchart.component.d.ts

-import { ChangeDetectorRef, DoCheck, ElementRef, IterableDiffers, NgZone, OnInit } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, IterableDiffers, NgZone, OnInit } from '@angular/core';
 import { FcCallbacks, FcEdge, FcModel, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
 import { FcModelService } from './model.service';
 import { FcModelValidationService } from './modelvalidation.service';
@@ -24,6 +24,7 @@ export declare class NgxFlowchartComponent implements OnInit, DoCheck {
     nodeWidth: number;
     nodeHeight: number;
     dropTargetId: string;
+    modelChanged: EventEmitter<any>;
     callbacks: FcCallbacks;
     userNodeCallbacks: UserNodeCallbacks;
     modelService: FcModelService;

dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts

@@ -34,10 +34,6 @@ export interface FcCoords {
     x?: number;
     y?: number;
 }
-export interface FcOffset {
-    top: number;
-    left: number;
-}
 export interface FcRectBox {
     top: number;
     left: number;

projects/ngx-flowchart/src/lib/model.service.ts

 import { FcModelValidationService } from './modelvalidation.service';
 import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
 import { Observable, of } from 'rxjs';
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 
 export class FcModelService {
 
@@ -24,12 +24,15 @@ export class FcModelService {
 
   dropTargetId: string;
 
+  modelChanged: EventEmitter<any>;
+
   connectors: ConnectorsModel;
   nodes: NodesModel;
   edges: EdgesModel;
 
   constructor(modelValidation: FcModelValidationService,
               model: FcModel,
+              modelChanged: EventEmitter<any>,
               cd: ChangeDetectorRef,
               selectedObjects: any[],
               dropNode: (event: Event, node: FcNode) => void,
@@ -42,6 +45,7 @@ export class FcModelService {
 
     this.modelValidation = modelValidation;
     this.model = model;
+    this.modelChanged = modelChanged;
     this.cd = cd;
     this.canvasHtmlElement = canvasHtmlElement;
     this.svgHtmlElement = svgHtmlElement;
@@ -59,6 +63,10 @@ export class FcModelService {
     this.edges = new EdgesModel(this);
   }
 
+  public notifyModelChanged() {
+    this.modelChanged.emit();
+  }
+
   public detectChanges() {
     setTimeout(() => {
       this.cd.detectChanges();
@@ -358,6 +366,7 @@ class NodesModel extends AbstractFcModel<FcNode> {
       }
     }
     model.nodes.splice(index, 1);
+    this.modelService.notifyModelChanged();
     this.modelService.nodeRemovedCallback(node);
   }
 
@@ -446,6 +455,7 @@ class EdgesModel extends AbstractFcModel<FcEdge> {
       this.deselect(edge);
     }
     model.edges.splice(index, 1);
+    this.modelService.notifyModelChanged();
     this.modelService.edgeRemovedCallback(edge);
   }
 
@@ -468,6 +478,7 @@ class EdgesModel extends AbstractFcModel<FcEdge> {
   public putEdge(edge: FcEdge) {
     const model = this.modelService.model;
     model.edges.push(edge);
+    this.modelService.notifyModelChanged();
   }
 
   public _addEdge(event: Event, sourceConnector: FcConnector, destConnector: FcConnector, label: string) {
@@ -482,6 +493,7 @@ class EdgesModel extends AbstractFcModel<FcEdge> {
     this.modelService.createEdge(event, edge).subscribe(
       (created) => {
         model.edges.push(created);
+        this.modelService.notifyModelChanged();
         this.modelService.edgeAddedCallback(created);
       }
     );

projects/ngx-flowchart/src/lib/ngx-flowchart.component.ts

@@ -2,14 +2,14 @@ import {
   ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   DoCheck,
-  ElementRef,
+  ElementRef, EventEmitter,
   HostBinding,
   HostListener,
   Input,
   IterableDiffer,
   IterableDiffers,
   NgZone,
-  OnInit
+  OnInit, Output
 } from '@angular/core';
 import { FcCallbacks, FcEdge, FcModel, FcNode, FlowchartConstants, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
 import { FcModelService } from './model.service';
@@ -60,6 +60,9 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
   @Input()
   dropTargetId: string;
 
+  @Output()
+  modelChanged = new EventEmitter();
+
   callbacks: FcCallbacks;
 
   userNodeCallbacks: UserNodeCallbacks;
@@ -114,7 +117,7 @@ export class NgxFlowchartComponent implements OnInit, DoCheck {
 
     const element = $(this.elementRef.nativeElement);
 
-    this.modelService = new FcModelService(this.modelValidation, this.model, this.cd, this.selectedObjects,
+    this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged, this.cd, this.selectedObjects,
       this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved,
       this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
 

projects/ngx-flowchart/src/lib/ngx-flowchart.models.ts

@@ -44,11 +44,6 @@ export interface FcCoords {
   y?: number;
 }
 
-export interface FcOffset {
-  top: number;
-  left: number;
-}
-
 export interface FcRectBox {
   top: number;
   left: number;

projects/ngx-flowchart/src/lib/node-dragging.service.ts

@@ -207,6 +207,7 @@ export class FcNodeDraggingService {
           draggedNode.y = Math.round(this.getYCoordinate(dragOffset.y + event.clientY));
         }
         event.preventDefault();
+        this.modelService.notifyModelChanged();
         return false;
       });
     }
@@ -245,6 +246,7 @@ export class FcNodeDraggingService {
             this.resizeCanvas(draggedNode, this.draggedElements[i]);
           }
           event.preventDefault();
+          this.modelService.notifyModelChanged();
           return false;
         });
       }
@@ -288,6 +290,7 @@ export class FcNodeDraggingService {
           this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
         }
         this.nodeDraggingScope.shadowElements.length = 0;
+        this.modelService.notifyModelChanged();
       }
 
       if (this.nodeDraggingScope.draggedNodes.length) {