Add remove Css Based on Keyboard event


#1

Hello ,

i want to apply css for ion input after keyboard open in ionic 2.

this.keyboard.onKeyboardShow().subscribe(() => {
//here i want add z-index to ion input
this.fileInput().addClass(‘test’); //tried this but it is not worikng
});

anyone please help me out Thanks in advance


#2

What is not working? Can’t you subscribe to the keyboard showing or doesn’t your code work?


#3

HI

i want to add class after keyboard event subscribe


#4

this is in the .ts

public isKeyboardShowing:boolean = false;
this.keyboard.onKeyboardShow().subscribe(() => {

//here i want add z-index to ion input
this.isKeyboardShowing = true;
});

anotherFunctionForKeyboardHide(){
this.isKeyboardShowing = false
}

later in you html you can use [ngClass]
ngClass bind value to object of cssName:boolean
it will listen to any changes of your isKeyboardShowing

<div [ngClass]='{test:isKeyboardShowing,classForOdd: 1%2 != 0}'>

</div>