Add, edit or delete the features in a page

Ionic Framework ionic-v3
1

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. Please helpme with the code to edit the items in the page.
html code

<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>&nbsp;</p>
                    <p class="cost">₹0</p>
                    <p>&nbsp;</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>&nbsp;</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>&nbsp;</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>

ts file

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(){

    // }
}

scss

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%;
    
}

}

2

@OliverPrimo @D pls help

3

How do you want to edit the card content? do you want a modal with all the card fields? or do you want edit the card with an alert? and which field do you want edit?
Please be more precise.

4

I have created a modal page when the add button is clicked. But i cannot add input fields in the modal page. How to edit the subscription page using modal page. I will post the edited code.

subscription html code

  <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.title}}
                        </ion-card-title>
                        <p>{{sub.plan}}</p>
                        <p>&nbsp;</p>
                        <p class="cost">₹{{sub.amount}}</p>
                        <p>&nbsp;</p>
                        <p>
                            <button (click)="free_pay()" 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 category: string = "CLASSIC";
    public subscription: string = "PREMIUM";
    public option: string = "";
    public cardClicked: boolean = false;
    isenabled: boolean = false;
    subLst: any = [{
        title: "Free",
        plan: "1 Month",
        discount: false,
        amount: 0

    },{
        title: "Classic",
        plan: "6 month",
        discount: false,
        amount: 100

    },{
        title: "Premium",
        plan: "1 Year",
        discount: false,
        amount: 200

    }]
    //  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,public modalCtrl: ModalController) {
        // this.navParams.get('userParams');
    }

    openModal(characterNum) {

        let modal = this.modalCtrl.create(AdminsubPage, characterNum);
        modal.present();
      }


    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()
    }

    }

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 *ngFor="let item of character['items']">
        <ion-row>
            <ion-item>
                <ion-label fixed>{{character.name}}</ion-label>
                <ion-input type="text" value=""></ion-input>
            </ion-item>
        </ion-row>
        <ion-item>
            <ion-label fixed>{{character.plan}}</ion-label>
            <ion-input type="text" value=""></ion-input>
        </ion-item>
        <ion-item>
            <ion-label fixed>{{character.amount}}</ion-label>
            <ion-input type="text" value=""></ion-input>
        </ion-item>

        <!-- <ion-item *ngFor="let item of character['items']">
          {{item.title}}
          <ion-note item-end>
            {{item.note}}
          </ion-note>
        </ion-item> -->
    </ion-col>
  </ion-content>

modal ts page


import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ModalController, 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;

    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: 'Title',
                plan: 'Plan',
                amount: 'Amount',
                // items: [
                //     { title: 'Race', note: 'Hobbit' },
                //     { title: 'Culture', note: 'River Folk' },
                //     { title: 'Alter Ego', note: 'Smeagol' }
                // ]
            }
        ];
        this.character = characters[this.params.get('charNum')];
    }
    public closeModal() {
        this.viewCtrl.dismiss();
    }

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

You can pass the data that you collected on the modal page in this way.

You need to dismiss your modal passing the data:
this.viewCtrl.dismiss(this.data_that_you_want_to_pass);

In your subscription page, where you create the modal (openModal method) you can add this piece of code that retireve the data from the input fields of your modal:

let modal = this.modalCtrl.create(AdminsubPage, characterNum);
modal.onDidDismiss(data => {
  if(data!=undefined){
     this.your_variable = data; 

      // store your input fields into the variables that populate your card to see the changes when the modal is dismissed
  });
modal.present();

Hope it works for you :slight_smile: