Icons are not displayed

[alexisAvenel]

Hello !

I develop an Ionic v3 application and I use your component (Thanks a lot for it :D).

HTML view

<ion-header>
    <ion-navbar hideBackButton>
        <ion-title>Connexion</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div id="login-ico" text-center [class.hide]="isKeyboardVisible">
        <img src="assets/img/logo.png"/>
    </div>
    <form [formGroup]="pinFormGroup">
        <pin formControlName="pin" [keyboard]="keyboard" [content]="content"></pin>
        <div text-center padding-vertical [class.hide]="isKeyboardVisible">
            <span (click)="gotoForget()">J'ai oublié mon code</span>
        </div>
        <div text-center class="fix-bottom" [class.hide]="isKeyboardVisible">
            <button ion-button round large extend color="oscar-pink" (click)="validPin()" [disabled]="!pinFormGroup.valid">Valider</button>
        </div>
    </form>
</ion-content>

<ion-digit-keyboard
        [align]="keyboardSettings.align"
        [width]="keyboardSettings.width"
        [visible]="keyboardSettings.visible"
        [rightActionOptions]="keyboardSettings.rightActionOptions"
        [leftActionOptions]="keyboardSettings.leftActionOptions"
        [roundButtons]="keyboardSettings.roundButtons"
        [showLetters]="keyboardSettings.showLetters"
        [swipeToHide]="keyboardSettings.swipeToHide"
        [theme]="keyboardSettings.theme"
></ion-digit-keyboard>

TS file

import {Component, ViewChild} from '@angular/core';
import {Content, IonicPage, Keyboard, MenuController, NavController} from 'ionic-angular';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Bridge} from "../../../providers/bridge";
import {IonDigitKeyboardOptions} from "../../../components/ion-digit-keyboard/interfaces/ion-digit-keyboard.interface";
import {IonDigitKeyboardCmp} from "../../../components/ion-digit-keyboard/components/ion-digit-keyboard-cmp/ion-digit-keyboard-cmp";
import {LoaderProvider} from "../../../providers/loader";

@IonicPage()
@Component({
    selector: 'page-pin',
    templateUrl: 'pin.html',
})
export class PinPage {
    @ViewChild(IonDigitKeyboardCmp) keyboard;
    @ViewChild(Content) content;

    private pinFormGroup: FormGroup;
    public isKeyboardVisible: boolean = false;

    public keyboardSettings: IonDigitKeyboardOptions = {
        align: 'center',
        visible: false,
        rightActionOptions: {
            hidden: false,
            iconName: 'ios-checkmark-circle-outline',
            fontSize: '1.4em'
        },
        leftActionOptions: {
            hidden: false,
            iconName: 'ios-backspace-outline',
            fontSize: '1.4em'
        },
        roundButtons: false,
        showLetters: true,
        swipeToHide: true,
        theme: 'light'
    };

    constructor(public navCtrl: NavController,
                private _formBuilder: FormBuilder,
                private _bridge: Bridge,
                private _menuCtrl: MenuController,
                private _nativeKeyboard: Keyboard,
                private _loaderProdider: LoaderProvider) {

        this._menuCtrl.enable(false);

        this.pinFormGroup = this._formBuilder.group({
            pin: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]{4}')])]
        });
    }

    ionViewDidLoad() {
        this.keyboard.onShow.subscribe(() => {
            this._nativeKeyboard.close();
            this.isKeyboardVisible = true;
        });

        this.keyboard.onHide.subscribe(() => {
            this.isKeyboardVisible = false;
        });
    }

    public gotoForget() {
        this.navCtrl.push('ForgetPinPage');
    }

    public validPin() {
        if (this.pinFormGroup.valid) {
            this._loaderProdider.present();
            this._bridge.checkPin(this.pinFormGroup.value.pin)
                .subscribe(() => {
                    this._loaderProdider.dismiss();
                    this._menuCtrl.enable(true);
                    this.navCtrl.push('IndexPage');
                });
        }
    }
}

But with this config no one icon are displayed :( What's the problem ?

thanks.

[skol-pro]

Hi alexisAvenel ! Yes, I introduced that regression yesterday, update (or grab) ion-digit-keyboard.module.ts and ion-digit-keyboard-cmp.html ;-)

[skol-pro]

By the way, I see that you're using this._nativeKeyboard.close();, did you already tried it on device ?

I'm making an ion-digit-input component and I'm trying to figure out the best way to prevent the native keyboard from showing up, and I'm at the point where I use this trick but I'm not sure about the reliability...

[alexisAvenel]

I've updated your component and it works, thanks ;) Yes I'm currently testing it on an android phone and it works fine, but I'm not sure about its reliability either 😥

[skol-pro]

Yeah, I'm especially thinking about iOS, the keyboard is kinda hard to manipulate :-/

However it's because I'm trying to do something that works for anyone, but on projects I made using my keyboard, I just put the disabled attribute on inputs and styled them. 👍

[alexisAvenel]

Yes but if you look the Ionic documentation they use it : docs, so i think that for the moment we have to use it, and find a master solution for future ^^

[skol-pro]

Hum well the documentation just shows that it's possible, but it's never recommended in our case :p The disabled trick does the job perfectly, in case you have troubles this way ;-)