DOM not updating when using ionScroll on ion-content


Have wasted a lot of time trying to figure it out.
Here is my code for go to top on click. The fab only shows when a person scrolls more than 50px.
Whitout zone ngIf does not update the DOM.
I am using angular 4.1.2 and ionic 3.10.2

I am not sure why it needs zone but I do need to know. If it is a bug then is it in angular or ionic?


import { ViewChild, Component, NgZone } from '@angular/core';
import { Content } from 'ionic-angular';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  @ViewChild(Content) content: Content;
  showTopBtn = false;

    private _ngZone: NgZone

  didScroll(event) {
	if(event.scrollTop > 50) => { 
			this.showTopBtn = true;
	{ => { 
			this.showTopBtn = false;


<ion-content (ionScroll)="didScroll($event)">
  <ion-fab right bottom (click)="toTop()" *ngIf="showTopBtn == true">
	  <button ion-fab mini color="primary"><ion-icon name="arrow-up"></ion-icon></button>