Ionic 5 Keyboard Attach Service

keyboard-attach.service.ts

import { Injectable, OnDestroy } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { Platform } from '@ionic/angular';
import { fromEvent, Subscription } from 'rxjs';

const { Keyboard } = Plugins;
/**
 * @originalsource https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754
 * 
 * Usage
    export class MyServcieOrComponent {
      private result: ManualItemCreateAlertInputs;

      constructor(
        private KbAttach: KeyboardAttachService
        private alertController: AlertController
      ) { }

      async showAlert() {
        // Present the alert
        const manualItemCreateAlert = await this.alertController.create(alertDefaults);
         // @note quickfix for kb over the input
         // @see https://github.com/ionic-team/ionic-framework/issues/21924
        this.KbAttach.init(manualItemCreateAlert)
        await manualItemCreateAlert.present();
      }
    }
 */


@Injectable({
  providedIn: 'root'
})
export class KeyboardAttachService implements OnDestroy {
  private onShowSubscription: Subscription;
  private onHideSubscription: Subscription;
  element: HTMLIonAlertElement;

  constructor(
    private platform: Platform,
  ) {
    if (this.platform.is('ios') || this.platform.is('android')) {
      this.onShowSubscription = fromEvent(window, 'keyboardWillShow').subscribe((e) => { this.onShow(e); });
      this.onHideSubscription = fromEvent(window, 'keyboardWillHide').subscribe((e) => { this.onHide();  });
    }
  }

  ngOnDestroy() {
    if (this.onShowSubscription) {
      this.onShowSubscription.unsubscribe();
    }
    if (this.onHideSubscription) {
      this.onHideSubscription.unsubscribe();
    }
  }

  init(element: HTMLIonAlertElement) {
    this.element = element
  }

  private onShow(e) {
    const keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);
    this.setElementPosition(keyboardHeight);
  }

  private onHide() {
    this.setElementPosition(0);
  }

  private setElementPosition(pixels: number) {
    if (this.element !== undefined) {
      this.element.style.marginBottom = pixels + 'px';
    }
  }
}