알람 - Basic Alerts

 

출저

https://ionicframework.com/docs/components/#alert

출처에 가시면 더 자세히 나와요.

 

 

* page 추가를 보시고 오세요.

 

* 버튼 만들기(src/pages/other/ohter.html)

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>other</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="action-sheet-button-page">
  <button ion-button block color="dark" (click)="showAlert()">Show Basic Alert</button>
  <button ion-button block color="secondary" (click)="showPrompt()">Show Prompt Alert</button>
  <button ion-button color="primary" block (click)="showConfirm()">Show Confirm Alert</button>
  <button ion-button block color="primary" (click)="showRadio()">Show Radio Alert</button>
  <button ion-button block color="danger" (click)="showCheckbox()">Show Checkbox Alert</button>
</ion-content>

버튼 다섯개를 만듭니다.

 

- Basic Alerts(src/pages/other/other.ts 에 추가합니다.)

 

export class OtherPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
  }

public alertCtrl : AlertController 추가

 

showAlert() {
  let alert = this.alertCtrl.create({
    title: 'New Friend!',
    message: 'Your friend, Obi wan Kenobi, just approved your friend request!',
    buttons: ['Ok']
  });
  alert.present()
}

실행하면

 

 

위처럼 나옵니다.