From 47e1e1766a7032bf223d9cb274b44c611564eeec Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Thu, 6 Oct 2016 16:22:56 +0200
Subject: [PATCH] fix(fab): not using change detection

fixes #8424
---
 src/components/fab/fab.ts    | 15 ++++++++++-----
 src/util/ui-event-manager.ts |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/fab/fab.ts b/src/components/fab/fab.ts
index c27b2c10e32..792eb564579 100755
--- a/src/components/fab/fab.ts
+++ b/src/components/fab/fab.ts
@@ -5,6 +5,7 @@ import { Ion } from '../ion';
 
 import { UIEventManager } from '../../util/ui-event-manager';
 import { isTrueProperty } from '../../util/util';
+import { nativeTimeout } from '../../util/dom';
 
 /**
   * @name FabButton
@@ -126,14 +127,13 @@ export class FabButton extends Ion  {
  */
 @Directive({
   selector: 'ion-fab-list',
-  host: {
-    '[class.fab-list-active]': '_visible'
-  }
 })
 export class FabList {
   _visible: boolean = false;
   _fabs: FabButton[] = [];
 
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
+
   @ContentChildren(FabButton)
   set _setbuttons(query: QueryList<FabButton>) {
     let fabs = this._fabs = query.toArray();
@@ -150,18 +150,23 @@ export class FabList {
     if (visible === this._visible) {
       return;
     }
+    this._visible = visible;
 
     let fabs = this._fabs;
     let i = 1;
     if (visible) {
       fabs.forEach(fab => {
-        setTimeout(() => fab.setElementClass('show', true), i * 30);
+        nativeTimeout(() => fab.setElementClass('show', true), i * 30);
         i++;
       });
     } else {
       fabs.forEach(fab => fab.setElementClass('show', false));
     }
-    this._visible = visible;
+    this.setElementClass('fab-list-active', visible);
+  }
+
+  setElementClass(className: string, add: boolean) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, add);
   }
 
 }
diff --git a/src/util/ui-event-manager.ts b/src/util/ui-event-manager.ts
index 0b8305c856c..0722e206dbf 100644
--- a/src/util/ui-event-manager.ts
+++ b/src/util/ui-event-manager.ts
@@ -184,7 +184,7 @@ export class UIEventManager {
 }
 
 function listenEvent(ele: any, eventName: string, zoneWrapped: boolean, option: any, callback: any): Function {
-  let rawEvent = ('__zone_symbol__addEventListener' in ele && !zoneWrapped);
+  let rawEvent = (!zoneWrapped && '__zone_symbol__addEventListener' in ele);
   if (rawEvent) {
     ele.__zone_symbol__addEventListener(eventName, callback, option);
     return () => ele.__zone_symbol__removeEventListener(eventName, callback);