html
<ion-header>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button (click)='presentAlertPrompt()'>
<ion-icon slot="icon-only" name="cog"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>
Ejemplo botón configuración
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
ts
import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public alertController: AlertController) {}
async presentAlertPrompt() {
const alert = await this.alertController.create({
header: 'Configuración',
inputs: [
{
name: 'ip',
type: 'text',
placeholder: 'Dirección IP Servidor'
},{
name: 'puerto',
type: 'text',
placeholder: 'Puerto'
}
],
buttons: [
{
text: 'Cancelar',
role: 'cancel',
handler: () => {
console.log('Cancelado');
}
}, {
text: 'Aceptar',
handler: (data) => {
console.log(data.ip);
console.log(data.puerto);
}
}
]
});
await alert.present();
}
}