diff --git a/src/app/showcase/components/chart/barchart/barchartdemo.ts b/src/app/showcase/components/chart/barchart/barchartdemo.ts
index 3884c0c0538..b7d478f5c52 100755
--- a/src/app/showcase/components/chart/barchart/barchartdemo.ts
+++ b/src/app/showcase/components/chart/barchart/barchartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './barchartdemo.html'
 })
-export class BarChartDemo {
+export class BarChartDemo implements OnInit, OnDestroy {
 
     basicData: any;
 
@@ -512,4 +512,10 @@ export class BarChartDemo {
             }
         };
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/combochart/comobochartdemo.ts b/src/app/showcase/components/chart/combochart/comobochartdemo.ts
index 7149e693e5e..e9a718d6d3f 100755
--- a/src/app/showcase/components/chart/combochart/comobochartdemo.ts
+++ b/src/app/showcase/components/chart/combochart/comobochartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './combochartdemo.html'
 })
-export class ComboChartDemo {
+export class ComboChartDemo implements OnInit, OnDestroy {
 
     data: any;
 
@@ -169,4 +169,10 @@ export class ComboChartDemo {
             }
         };
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/doughnutchart/doughnutchartdemo.ts b/src/app/showcase/components/chart/doughnutchart/doughnutchartdemo.ts
index 03a4f710c90..ea8ff8559fd 100755
--- a/src/app/showcase/components/chart/doughnutchart/doughnutchartdemo.ts
+++ b/src/app/showcase/components/chart/doughnutchart/doughnutchartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './doughnutchartdemo.html'
 })
-export class DoughnutChartDemo {
+export class DoughnutChartDemo implements OnInit, OnDestroy {
 
     data: any;
 
@@ -73,4 +73,10 @@ export class DoughnutChartDemo {
             }
         }
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/linechart/linechartdemo.ts b/src/app/showcase/components/chart/linechart/linechartdemo.ts
index 7334dc0c3b5..63bf3ffca22 100755
--- a/src/app/showcase/components/chart/linechart/linechartdemo.ts
+++ b/src/app/showcase/components/chart/linechart/linechartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {MessageService} from 'primeng/api';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
@@ -8,7 +8,7 @@ import {AppConfig} from '../../../domain/appconfig';
     templateUrl: './linechartdemo.html',
     providers: [MessageService]
 })
-export class LineChartDemo implements OnInit {
+export class LineChartDemo implements OnInit, OnDestroy {
 
     basicData: any;
 
@@ -301,4 +301,10 @@ export class LineChartDemo implements OnInit {
             }
         };
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/piechart/piechartdemo.ts b/src/app/showcase/components/chart/piechart/piechartdemo.ts
index 77a49baf447..5379c016ff7 100755
--- a/src/app/showcase/components/chart/piechart/piechartdemo.ts
+++ b/src/app/showcase/components/chart/piechart/piechartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './piechartdemo.html'
 })
-export class PieChartDemo implements OnInit {
+export class PieChartDemo implements OnInit, OnDestroy {
 
     data: any;
 
@@ -73,4 +73,10 @@ export class PieChartDemo implements OnInit {
             }
         }
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/polarareachart/polarareachartdemo.ts b/src/app/showcase/components/chart/polarareachart/polarareachartdemo.ts
index bc47d940d8f..eac4c24d918 100755
--- a/src/app/showcase/components/chart/polarareachart/polarareachartdemo.ts
+++ b/src/app/showcase/components/chart/polarareachart/polarareachartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './polarareachartdemo.html'
 })
-export class PolarAreaChartDemo {
+export class PolarAreaChartDemo implements OnInit, OnDestroy {
 
     data: any;
 
@@ -95,4 +95,10 @@ export class PolarAreaChartDemo {
             }
         }
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }
diff --git a/src/app/showcase/components/chart/radarchart/radarchartdemo.ts b/src/app/showcase/components/chart/radarchart/radarchartdemo.ts
index ff905b467ca..a9c7ae85373 100755
--- a/src/app/showcase/components/chart/radarchart/radarchartdemo.ts
+++ b/src/app/showcase/components/chart/radarchart/radarchartdemo.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {AppConfigService} from '../../../service/appconfigservice';
 import {AppConfig} from '../../../domain/appconfig';
@@ -6,7 +6,7 @@ import {AppConfig} from '../../../domain/appconfig';
 @Component({
     templateUrl: './radarchartdemo.html'
 })
-export class RadarChartDemo {
+export class RadarChartDemo implements OnInit, OnDestroy {
 
     data: any;
 
@@ -106,4 +106,10 @@ export class RadarChartDemo {
             }
         }
     }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
 }