scroll to hide fab button

app.module.ts

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HideHeaderDirective  } from "../directives/hide-header/hide-header";
import { AutoHideDirective  } from "../directives/auto-hide/auto-hide";

@NgModule({
  declarations: [

    HideHeaderDirective,
    AutoHideDirective
  ],


ionic g directive AutoHide

import { Directive ,Renderer, ElementRef } from '@angular/core';

@Directive({
  selector: '[auto-hide]' ,
  host: {
    '(ionScroll)':'onContentScroll($event)'
  }
})
export class AutoHideDirective {
fabToHide;
oldScrollTop: number = 0;
  constructor( private renderer : Renderer, private element : ElementRef) {
    console.log('Hello AutoHideDirective Directive');
  }
 
  ngOnInit(){
    this.fabToHide = this.element.nativeElement.getElementsByClassName("fab")[0];
    this.renderer.setElementStyle(this.fabToHide, "webkitTransition", "transform 500ms, opacity 500ms");
  }
  onContentScroll(e){
    console.log("DOWN");
    if(e.scrollTop - this.oldScrollTop > 10){
      this.renderer.setElementStyle(this.fabToHide, "opacity", "0");
      this.renderer.setElementStyle(this.fabToHide, "webkitTransform","scale3d(.1,.1,.1)");
    }
    else if(e.scrollTop - this.oldScrollTop < 0){
      console.log("UP")
      this.renderer.setElementStyle(this.fabToHide, "opacity", "1");
      this.renderer.setElementStyle(this.fabToHide, "webkitTransform", "scale3d(1,1,1)");
    }
   
    this.oldScrollTop = e.scrollTop;
  }

}

HTML

<ion-content    auto-hide>

<p>.......</p>

</ion-content>

  <ion-fab right bottom  #fab>

    <button ion-fab color="danger">

      <ion-icon name="map"></ion-icon>

    </button>

  </ion-fab>