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 the button is clicked it will redirect to a modal page which consist of text fields. By clicking the close button in modal page the subscription page is automated to new contents which is given in the modal page. I am new in ionic so please help me with the full code to edit the items in the page.
subscription html
<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)="openModal({charNum: 0})">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-grid>
<ion-row>
<ion-col col-4 *ngFor="let sub of subLst">
<ion-card (click)="onCardClick()">
<div *ngIf="cardClicked"></div>
<ion-card-content>
<ion-card-title class="titles">
{{sub.name}}
</ion-card-title>
<p>{{sub.plan}}</p>
<p> </p>
<p class="cost">₹{{sub.amount}}</p>
<p> </p>
<p>
<button (click)="free_pay(option)" ion-button color="dark" round>Choose plan</button>
</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
subscription ts page
import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage, Checkbox } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { ModalController, Platform, ViewController } from 'ionic-angular';
import { JobsearchPage } from '../jobsearch/jobsearch';
import { ConnectpayPage } from '../connectpay/connectpay';
import { AdminsubPage } from '../adminsub/adminsub';
@Component({
selector: 'page-jobsub',
templateUrl: 'jobsub.html',
providers: [ObsAuthService]
})
export class JobsubPage {
public isPayValid:boolean = false;
jobseacrchPage:JobsearchPage;
connectpayPage:ConnectpayPage;
public category: string = "CLASSIC";
public subscription: string = "PREMIUM";
// public option: string = "";
public opt:boolean=false;
public cardClicked: boolean = false;
isenabled: boolean = false;
subLst: any = [{
name: "Free",
plan: "1 Month",
discount: false,
amount: 0,
opt: true
}, {
name: "Classic",
plan: "6 month",
discount: false,
amount: 100,
opt: false
}, {
name: "Premium",
plan: "1 Year",
discount: false,
amount: 200,
opt: false
}]
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public navParams: NavParams, public modalCtrl: ModalController) {
// this.navParams.get('userParams');
}
openModal(characterNum) {
let modal = this.modalCtrl.create(AdminsubPage, characterNum);
modal.onDidDismiss(data => {
// if (data != undefined) {
// this.subLst = data;
// }
console.log(data);
});
modal.present();
}
selectChange(e) {
console.log(e);
}
//redirect to job search page
public free_pay() {
if(this.validate()){
this.nav.push(JobsearchPage);
}
else{
this.nav.push(ConnectpayPage);
}
}
//to enable the edit button
public onCardClick() {
this.cardClicked = !this.cardClicked;
this.isenabled = true;
}
validate():boolean{
if(this.opt==true){
this.isPayValid=true;
}
else{
this.isPayValid=false;
}
return this.isPayValid;
}
}
modal html page
<ion-header>
<ion-toolbar>
<ion-title>
Edit
</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">Close</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-col>
<ion-row>
<ion-item>
<ion-label fixed>Title</ion-label>
<ion-input type="text" value="">{{character.name}}</ion-input>
</ion-item>
</ion-row>
<ion-item>
<ion-label fixed>Plan</ion-label>
<ion-input type="text" value="">{{character.plan}}</ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Amount</ion-label>
<ion-input type="text" value="">{{character.amount}}</ion-input>
</ion-item>
</ion-col>
</ion-content>
modal ts page
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { Platform, NavParams, ViewController } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { ToastController } from 'ionic-angular';
@Component({
selector: 'page-adminsub',
templateUrl: 'adminsub.html',
providers: [ObsAuthService]
})
export class AdminsubPage {
character;
data;
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController,
public toastCtrl: ToastController, public platform: Platform,
public params: NavParams,
public viewCtrl: ViewController) {
var characters = [
{
name: String,
plan: String,
amount: Number,
// items: [
// { title: 'Race', note: 'Hobbit' },
// { title: 'Culture', note: 'River Folk' },
// { title: 'Alter Ego', note: 'Smeagol' }
// ]
}
];
this.character = characters[this.params.get('charNum')];
}
public closeModal() {
// let data = { 'foo': 'bar' };
this.viewCtrl.dismiss(this.character);
}
selectChange(e) {
console.log(e);
}
}