Hide header on scroll in Ionic 5

hide-header.directive.ts

import { Directive, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { DomController } from '@ionic/angular';

/**
 * Moves away the header when scrolling down.
 */
@Directive({
    selector: '[appHideHeader]',
})
export class HideHeaderDirective implements OnInit {
    @Input('header') header: any;

    /**
     * Minimum scroll offset from top in pixels until the animation kicks in.
     */
    @Input('scrollThreshold') scrollThreshold: number;

    private lastY = 0;

    constructor(private renderer: Renderer2, private domCtrl: DomController) {
        // Doing nothing.
    }

    ngOnInit(): void {
        this.header = this.header.el;
        this.domCtrl.write(() => {
            this.renderer.setStyle(this.header, 'transition', 'margin-top 700ms');
        });
    }

    @HostListener('ionScroll', ['$event']) onContentScroll($event: any) {
        if (
            $event.detail.scrollTop > (this.scrollThreshold || 0) &&
            $event.detail.scrollTop > this.lastY
        ) {
            this.domCtrl.write(() => {
                this.renderer.setStyle(this.header, 'margin-top', `-${this.header.clientHeight}px`);
            });
        } else {
            this.domCtrl.write(() => {
                this.renderer.setStyle(this.header, 'margin-top', '0');
            });
        }

        this.lastY = $event.detail.scrollTop;
    }
}

For more information see How to hide header on scroll in ionic 4? (It refers to this answer: https://stackoverflow.com/a/56996295/769726)