Ionic Keyboard Attach Directive

keyboard-attach.directive.ts

import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Content, Platform } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

/**
 * @name KeyboardAttachDirective
 * @source https://gist.github.com/rdlabo/942671d8c9cffb02676756cdd56aa1c0
 * @forked https://gist.github.com/Manduro/bc121fd39f21558df2a952b39e907754
 * @description
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * @usage
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective implements OnInit, OnDestroy {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;
    private onShowWindowSubscription: Subscription;

    constructor(
        private elementRef: ElementRef,
        private keyboard: Keyboard,
        private platform: Platform
    ) {}

    ngOnInit() {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

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

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

    private onHide() {
        this.setElementPosition(0);
        this.keyboard.disableScroll(false);
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.resize();

        this.onShowWindowSubscription = Observable.timer(0, 1)
            .subscribe(
            ()=>{
                if(window.pageYOffset !== 0){
                    window.scrollTo(0, 0) ;
                    this.onShowWindowSubscription.unsubscribe();

                    setTimeout(()=>{
                        this.content.scrollToBottom(0);
                    },100)
                }
            }
        )
    }
}

#Hi, sorry, i have an issue on ionic build..
`[11:00:58] copy started ...
[11:01:00] deeplinks started ...
[11:01:00] deeplinks finished in 219 ms
[11:01:00] transpile started ...
[11:01:17] typescript: src/directives/keyboard-attach.directive.ts, line: 84
Property 'timer' does not exist on type 'typeof Observable'.

  L84:          this.onShowWindowSubscription = Observable.timer(0, 1)
  L85:              .subscribe(

Error: Failed to transpile program
at BuildError.Error (native)
at new BuildError (//node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at /(//node_modules/@ionic/app-scripts/dist/transpile.js:159:20
at transpileWorker (//node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (//node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
at /*****/node_modules/@ionic/app-scripts/dist/build.js:106:82
[11:01:20] copy finished in 21.82 s`

cordova version : 8.0.0, but i have the same issue on my previous version.. cordova 7.1.0
ionic version : 3.19.0

Thanks,
Simon

sorry issue = bug

fixed with : import 'rxjs/add/observable/timer';
but this directive not work fine for me.. on iPad.. I just want to add a footer with button fixed to keyboard.. (no Input..)

not firing onKeyboardShow when i was add this directive in div