반응형

[IONIC2 ] ionic2 -input에서 enter key 입력시 폼 전송하기 


input에서 enter key 입력시 폼전송하기


(keyup.enter)=   : enter key 입력 시 실행


Template:

<ion-searchbar
      [(ngModel)]="searchQuery"
      [showCancelButton]="true"
      (ionInput)="search($event)"
      (keyup.enter)="someFunction($event)">
</ion-searchbar>

Component TS: someFunction(event: KeyboardEvent) { console.log((<HTMLInputElement>event.target).value); }











.

반응형
반응형

[IONIC2] IONIC2에서 안드로이드 backbutton 시 액션 적용. 


안드로이드 backButton 버튼 사용시 앱에서 처리. 앱을 종료할 것인지 아닌지 물어봄,. 


app.component.ts 에 적용해보면 된다. 

import ~~~ 
import { App, Platform, ActionSheetController,AlertController } from 'ionic-angular';


      //-- android backbutton process
      platform.registerBackButtonAction(() => {
        let navv = app.getActiveNav();
        if (navv.canGoBack()){ //Can we go back?
          navv.pop();
        }else{
          let confirm = alertCtrl.create({
            title: '앱을 종료하시겠습니까?',
            message: '',  //'OK를 선택하면 앱이 종료됩니다.',
            buttons: [
              {
                text: 'OK',
                handler: () => {
                    platform.exitApp();
                }
              },
              {
                text: 'Cancel',
                handler: () => {
                              //
                }
              }
            ]
          });
          confirm.present();
        }
      });

/*
      //-- 액션 시트를 사용한 예제
      platform.registerBackButtonAction(() => {
          let nav = app.getActiveNav();
          if (nav.canGoBack()){ //Can we go back?
              nav.pop();
          }else{
              let actionSheet = actionSheetCtrl.create({
              title: '앱을 종료하시겠습니까?',
              buttons: [
                  {
                  text: '예, 종료하겠습니다. ',
                      handler: () => {
                          platform.exitApp(); //Exit from app
                      }
                  },{
                      text: '아니오.',
                      role: 'cancel',
                      handler: () => {
                          console.log('Cancel clicked');
                      }
                  }
              ]
              });
              actionSheet.present();
          }
      });
*/


반응형
반응형
How to create a custom app icon/splash screen in Ionic2



반응형

+ Recent posts