[하이브리드앱 ionic]시작해보기 4 - alert창 띄우기

버튼을 만들고,

버튼을 클릭했을 때 alert 창을 띄우도록 합니다. 

 

 

 

html 파일 안에 버튼을 생성합니다. 

페이지명.page.html

<ion-button color="primary"  (click)="presentAlert()">alert</ion-button>

원하는 위치에 버튼을 넣고 

(click)="presentAlert()" 

버튼을 클릭했을 때 presentAlert 함수를 호출합니다. 

 

presentAlert 함수는 

페이지명.page.ts 파일에 정의해 줍니다. 

 

last 라는 이름의 페이지에 추가해 보았습니다.

 

 

last.page.ts

import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-last',
  templateUrl: './last.page.html',
  styleUrls: ['./last.page.scss'],
})

export class LastPage implements OnInit {

  
  constructor(public alertController: AlertController) {}

  async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: '제목',
      message: '내용.',
      buttons: ['확인']
    });

    await alert.present();
  }

  ngOnInit() {
  }

}

 

 

결과는 아래와 같습니다. 

 

 

 

참고

 

버튼

https://ionicframework.com/docs/api/button

ion-button - Ionic Documentation

 

alert

https://ionicframework.com/docs/api/alert

ion-alert - Ionic Documentation