diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index 6713045482..417a177109 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -1,5 +1,5 @@
-<md-tab-group>
-    <md-tab id="tasks-header" href="#tasks" (click)="activeTab = 'tasks'" label="{{'PS-TAB.TASKS-TAB' | translate}}">
+<md-tab-group [(selectedIndex)]="activeTab">
+    <md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
         <div class="page-content">
             <div class="activiti-demo-grid">
                 <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
@@ -102,7 +102,7 @@
             </div>
         </div>
     </md-tab>
-    <md-tab id="processes-header" href="#processes" (click)="activeTab = 'processes'"
+    <md-tab id="processes-header" href="#processes"
             label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
         <div class="page-content">
             <div class="mdl-grid">
@@ -189,7 +189,7 @@
             </div>
         </div>
     </md-tab>
-    <md-tab id="report-header" href="#report" (click)="activeTab = 'reports'"
+    <md-tab id="report-header" href="#report"
             label="{{'PS-TAB.REPORTS-TAB' | translate}}">
         <div class="mdl-grid">
             <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index 052601c797..9d84905918 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -90,6 +90,8 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
     fileShowed: boolean = false;
     selectFirstReport: boolean = false;
 
+    private tabs = { tasks : 0 , processes : 1, reports: 2};
+
     content: Blob;
     contentName: string;
 
@@ -106,7 +108,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
     taskPage: number = 0;
     processSchemaColumns: any [] = [];
 
-    activeTab: string = 'tasks'; // tasks|processes|reports
+    activeTab: number = this.tabs.tasks; // tasks|processes|reports
 
     taskFilter: FilterRepresentationModel;
     report: any;
@@ -204,7 +206,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
         });
 
         if (this.router.url.includes('processes') ) {
-            this.activeTab = 'processes';
+            this.activeTab = this.tabs.processes;
         }
         this.sub = this.route.params.subscribe(params => {
             let applicationId = params['appId'];
@@ -392,7 +394,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
 
     onProcessDetailsTaskClick(event: TaskDetailsEvent): void {
         event.preventDefault();
-        this.activeTab = 'tasks';
+        this.activeTab = this.tabs.tasks;
 
         const taskId = event.value.id;
         const processTaskDataRow = new ObjectDataRow({