I was searching how to achieve it but I couldn’t figure it out. Please have a look and tell me what I’m doing wrong:
booking-confirmation.html
<ion-content>
<div class="detailcontent">
.
.
.
<ion-item>
<button class="payConfirmation" ion-button clear text-uppercase color="greengrass" (click)="payment_method()" large item-right>
PAY
</button>
</ion-item>
</div>
</ion-content>
booking-confirmation.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-booking-confirmation',
templateUrl: 'booking-confirmation.html',
})
export class BookingConfirmationPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public alerCtrl: AlertController) { }
payment_method() {
let method = this.alerCtrl.create({
message: 'Payment Method',
buttons: [
{
text: 'Individual',
cssClass: 'method-color',
handler: () => {
console.log('Individual clicked');
}
},
{
text: 'Group',
cssClass: 'method-color',
handler: () => {
console.log('Group clicked');
}
}
]
});
method.present()
}
}
booking-confirmation.ts
page-booking-confirmation {
.method-color{
color: rgba(136,168,39,1);
}
.
.
.
}
Graphically I want this:
But I got this:
Please help