Add, edit or delete the features in a page - ionic-framework

Question

I have a subscription page consist of 3 cards, in which on selecting each card a button is enabled. This button is used to edit or add items to the page. when i click a card the button is enabled. so when i click the edit button i need to pop up with an alert box to edit the content in that card. please help.. Thank you
html code
import { Component } from '#angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { JobsearchPage } from '../jobsearch/jobsearch';
import { ConnectpayPage } from '../connectpay/connectpay';
#Component({
selector: 'page-jobsub',
templateUrl: 'jobsub.html',
providers: [ObsAuthService]
})
export class JobsubPage {
public category: string = "CLASSIC";
public subscription: string = "PREMIUM";
public option: string ="";
// public cardClicked: boolean = false;
isenabled:boolean=false;
editItem: any;
// public price: string ="";
// public p1: string = "₹100";
// public p2: string = "₹200";
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public navParams: NavParams) { }
selectChange(e) {
console.log(e);
}
//redirect to job search page
public free_pay(){
this.nav.push(JobsearchPage);
}
//proceed to payment page
public classic_pay(){
this.nav.push(ConnectpayPage, {option: this.category});
}
//proceed to payment page
public premium_pay(){
this.nav.push(ConnectpayPage, {option: this.subscription});
}
//to enable the edit button
public onCardClick(){
// this.cardClicked = !this.cardClicked;
this.isenabled=true;
this.editItem()
}
// public add_page(){
// }
}
page-jobsub{
.sentnc{
color: grey;
padding: 40px 10px;
text-align: center;
}
.card-md {
// width: calc(25% - 20px);
font-size: 1.4rem;
text-align: center;
// background: rgb(192, 179, 167);
}
.cost{
font-weight: bolder;
}
.titles{
color: crimson;
font-weight: bolder;
}
.add_buttn{
// width: 15%;
// background-color: red;
padding: 10px 15px;
// text-decoration-color: white;
width: 10%;
}
}
<ion-header>
<ion-navbar>
<ion-title>SUBSCRIPTION</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<ion-buttons end>
<button ion-button [disabled]="!isenabled" class="add_buttn" (click)="add_page()">Add/Edit</button>
</ion-buttons>
</ion-item>
<ion-label class="sentnc">Take your desired plan to get access to our content easily</ion-label>
<ion-row>
<ion-col col2>
<ion-card (click)="onCardClick()">
<!-- <div *ngIf="cardClicked"></div> -->
<ion-card-content>
<ion-card-title class="titles">
FREE
</ion-card-title>
<p>1 MONTH FREE</p>
<p> </p>
<p class="cost">₹0</p>
<p> </p>
<p>
<button (click)="free_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col2>
<ion-card (click)="onCardClick()">
<ion-card-content>
<ion-card-title class="titles">
CLASSIC
</ion-card-title>
<p>6 MONTHS PLAN</p>
<p><del>₹150</del></p>
<p class="cost">₹100<sub>/month</sub></p>
<p> </p>
<p>
<button (click)="classic_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card (click)="onCardClick()">
<ion-card-content>
<ion-card-title class="titles">
PREMIUM
</ion-card-title>
<p>1 YEAR PLAN</p>
<p><del>₹250</del></p>
<p class="cost">₹200<sub>/month</sub></p>
<p> </p>
<p>
<button (click)="premium_pay()" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-content>

Answer 1

you should try ionic modal.
Step
Create modal page and add it in your module file.
On edit click open model and pass parameter value you want to edit.
Assign parameter to modal page input.
update Value in database