How to edit the content of the page using a modal page

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>&nbsp;</p>
                        <p class="cost">₹{{sub.amount}}</p>
                        <p>&nbsp;</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);
    }

}


Hi, I edited your code to make it work. This code will add a new card element or plan every time the user closes modal.

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 class="add_buttn" (click)="openModal()">Add/Edit</button> // I removed the parameter of openModal() function.
        </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>&nbsp;</p>
                        <p class="cost">₹{{sub.amount}}</p>
                        <p>&nbsp;</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 - openModal()

// I removed the parameter of openModal() function.
openModal() {
    let modal = this.modalCtrl.create(AdminsubPage);
    modal.onDidDismiss(data => {
        this.subLst.push(data);
    });
    modal.present();
  }

Modal Page

// I removed the value attribute
// I chnaged the variables by removing character
<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-row>
      <ion-col>
        <ion-item>
            <ion-label stacked>Title</ion-label>
            <ion-input type="text" [(ngModel)]='name'></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
            <ion-label stacked>Plan</ion-label>
            <ion-input type="text" [(ngModel)]='plan'></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
            <ion-label stacked>Amount</ion-label>
            <ion-input type="text" [(ngModel)]='amount'></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
</ion-content>

Modal TS



export class AdminsubPage {

    // removed character then changed to individual variables
    public name: string = '';
    public plan: string = '';
    public amount: number;

    constructor(private nav: NavController,
      private alertCtrl: AlertController, private loadingCtrl: LoadingController,
      public toastCtrl: ToastController, public platform: Platform,
      public params: NavParams,
      public viewCtrl: ViewController) {
          //removed content
    }

    public closeModal() {
      //changed content
      var character = {
        'name': this.name,
        'discount': false,
        'plan': this.plan,
        'amount': this.amount,
        'opt': false,
      }
      this.viewCtrl.dismiss(character);
    }

    selectChange(e) {
        console.log(e);
    }
}

Here is a working demo https://ionic-ytejgz.stackblitz.io

I hope it will solve your problem :blush:

@neenu123 I’ve updated my demo. It is now dynamic.

  • It can add plans.
  • It can edit plans.

Please check this link https://ionic-ytejgz.stackblitz.io if it suits your needs.

This works fantastic.
Can you please share me the code.

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 class="add_buttn" (click)="openModal()">{{isAdd ? '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(sub.id)">
                    <div *ngIf="cardClicked"></div>
                    <ion-card-content>
                        <ion-card-title class="titles">
                            {{sub.name}}
                        </ion-card-title>
                        <p>{{sub.plan}}</p>
                        <p>&nbsp;</p>
                        <p class="cost">₹{{sub.amount}}</p>
                        <p>&nbsp;</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

  public cardClicked: boolean = false;
  public isAdd: boolean = true;
  public selectedId: number = null;
  subLst: any = [{
    id: 0,
    name: "Free",
    plan: "1 Month",
    discount: false,
    amount: 0,
    opt: true
  }, {
    id: 1,
    name: "Classic",
    plan: "6 month",
    discount: false,
    amount: 100,
    opt: false
  }, {
    id: 2,
    name: "Premium",
    plan: "1 Year",
    discount: false,
    amount: 200,
    opt: false
  }]

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

  }

  openModal() {
    var planData;

    if (this.selectedId != null) {
      planData = this.subLst[this.selectedId];
    } else {
      planData = this.subLst.length;
    }
    
    let modal = this.modalCtrl.create(AdminsubPage, {'planData': planData});
    modal.onDidDismiss(data => {
      if (data.id == this.subLst.length) {
        this.subLst.push(data);
      } else {
        this.subLst[data.id] = data;
      }
      this.isAdd = true;
      this.selectedId = null;
    });
    modal.present();
  }

  public onCardClick(id) {
    this.cardClicked = !this.cardClicked;
    this.isAdd = false;
    this.selectedId = id;
  }

Modal 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-row>
      <ion-col>
        <ion-item>
            <ion-label stacked>Title</ion-label>
            <ion-input type="text" [(ngModel)]='data.name'></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
            <ion-label stacked>Plan</ion-label>
            <ion-input type="text" [(ngModel)]='data.plan'></ion-input>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
            <ion-label stacked>Amount</ion-label>
            <ion-input type="text" [(ngModel)]='data.amount'></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
</ion-content>

Modal TS



export class AdminsubPage {

    public data: any;

    constructor(private nav: NavController,
      private alertCtrl: AlertController, private loadingCtrl: LoadingController,
      public toastCtrl: ToastController, public platform: Platform,
      public params: NavParams,
      public viewCtrl: ViewController) {
      var plan = this.params.get('planData');

      if (isNaN(plan)) {
        this.data = {
          'id': plan.id,
          'name' : plan.name,
          'discount': plan.discount,
          'plan': plan.plan,
          'amount': plan.amount,
          'opt': plan.opt,
        }
      } else {
        this.data = {
          'id': plan,
          'name' : '',
          'discount': '',
          'plan': '',
          'amount': '',
          'opt': '',
        }
      }
    }

    public closeModal() {
      var character = {
        'id': this.data.id,
        'name': this.data.name,
        'discount': this.data.discount,
        'plan': this.data.plan,
        'amount': this.data.amount,
        'opt': this.data.opt,
      }
      this.viewCtrl.dismiss(character);
    }

    selectChange(e) {
        console.log(e);
    }
}

Just let me know if this worked on you :blush:

Wow it works perfectly. Thanks a lot :blush::relaxed::hugs:

In this subscription page if we click the free option it should redirect to JobsearchPage and classic option and premium option will redirect to payment page.

subscription ts

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;
    public isAdd: boolean = true;
    public selectedId: number = null;
    // isenabled: boolean = false;
    subLst: any = [{
        id: 0,
        name: "Free",
        plan: "1 Month",
        discount: false,
        amount: 0,
        opt: true

    }, {
        id: 1,
        name: "Classic",
        plan: "6 month",
        discount: false,
        amount: 100,
        opt: false

    }, {
        id: 2,
        name: "Premium",
        plan: "1 Year",
        discount: false,
        amount: 200,
        opt: false

    }]
    //  editItem: any;
    //  public price: string ="";
    //  public p1: string = "₹100";
    //  public p2: string = "₹200";

    constructor(public nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        public navParams: NavParams, public modalCtrl: ModalController) {
        // this.navParams.get('userParams');
    }

    openModal() {
        var planData;

        if (this.selectedId != null) {
            planData = this.subLst[this.selectedId];
        } else {
            planData = this.subLst.length;
        }

        let modal = this.modalCtrl.create(AdminsubPage, { 'planData': planData });
        modal.onDidDismiss(data => {
            if (data.id == this.subLst.length) {
                this.subLst.push(data);
            } else {
                this.subLst[data.id] = data;
            }
            this.isAdd = true;
            this.selectedId = null;
        });
        modal.present();
    }


    selectChange(e) {
        console.log(e);
    }

    //redirect to job search page
    public free_pay() {
        // if (opt==='1'){
        if (this.validate()) {
            this.nav.push(JobsearchPage);
        }
        else {
            this.nav.push(ConnectpayPage);
        }
        // }
        // else if (opt=='2'){
        //     this.nav.push(ConnectpayPage);
        // }
        // else if (opt=='3'){
        //     this.nav.push(ConnectpayPage);
        // }
    }

    // //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(id) {
        this.cardClicked = !this.cardClicked;
        this.isAdd = false;
        this.selectedId = id;
      
      }

    // this.isenabled = true;

    validate(): boolean {
        if (this.opt == true) {

            this.isPayValid = true;
        }
        else {
            this.isPayValid = false;
        }
        return this.isPayValid;

    }
}

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 class="add_buttn" (click)="openModal()">{{isAdd ? '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(sub.id)">
                    <div *ngIf="cardClicked"></div>
                    <ion-card-content>
                        <ion-card-title class="titles">
                            {{sub.name}}
                        </ion-card-title>
                        <p>{{sub.plan}}</p>
                        <p>&nbsp;</p>
                        <p class="cost">₹{{sub.amount}}</p>
                        <p>&nbsp;</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>

payment html

<ion-header>
    <ion-navbar>
        <ion-title>PAYMENT OPTIONS</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-row>
        <!-- <ion-item> -->
        <ion-col>
            <ion-label class="caat">Selected Category:&nbsp;{{opt}} </ion-label>
        </ion-col>
        <ion-col>
            <ion-label class="caat">Amount to be paid:&nbsp;{{prc}} </ion-label>
        </ion-col>
        <!-- </ion-item> -->
    </ion-row>
    <ion-label class="p">Payment method : </ion-label>
    <ion-label class="caat">Payment done through : <ion-img class="img" src="../../assets/images/paytm-512.png">
        </ion-img>
    </ion-label>
    <div padding text-center>
        <a button class="btn" href="https://developer.paytm.com/docs/" ion-button color="primary" block> Proceed to
            paytm</a>
    </div>
</ion-content>

payment ts

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';


@Component({
    selector: 'page-connectpay',
    templateUrl: 'connectpay.html',
    providers: [ObsAuthService]
})
export class ConnectpayPage {

    opt: string ="";
    // prc: string ="";
    
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        public navParams: NavParams) {

        this.opt = navParams.get('option');
        console.log(this.opt);

        // this.opt = navParams.get('price');
        // console.log(this.prc);

        
    }

    selectChange(e) {
        console.log(e);
    }

    // goback() {
    //     this.nav.pop();  

}

Maybe you can do that on your own. It is very easy to do using navControllers and a simple condition.