DOM not updating when using ionScroll on ion-content

Ionic Framework ionic-v3
1

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?

Typescript

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

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

  constructor(
    private _ngZone: NgZone
  ){}

  toTop()
  {
  	this.content.scrollToTop();
  }
  
  didScroll(event) {
	if(event.scrollTop > 50)
		this._ngZone.run(() => { 
			this.showTopBtn = true;
		 });
	else
	{
		this._ngZone.run(() => { 
			this.showTopBtn = false;
		 });		
	}	
  }
}

Template

<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>
  </ion-fab>
</ion-content>