CODEWITHSUNDEEP
angularjsarraysionic2angular2-formsionic3
Rahul Gupta
Rahul Gupta

Reputation: 31

Appending data into an array of an another page in an Ionic-2 and ionic 3

I am passing data from "Add-Item.ts" to "home.ts" and pushing that data into an array. but as soon as I am navigate to add-item.html the previous data from "home.ts" is erased or may be constructor is loaded again . I am **not able to push data in an array of "home.ts" ** from "Add-Item.ts". please suggest me as soon as possible ............

my "Add-Item.html" :

export class AddItemPage {
  posts:Posts[];
  public showPage: boolean;
  dateExp : string;
  check : string;
  expense :string ;
  currency : string;
  amount :any;
  billToggl :boolean;
  msg : String ;
  myDate: String = new Date().toISOString().substring(0, 10);


  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl : ViewController, 
              public modalCtrl: ModalController,public toastCtrl: ToastController,private _form: FormBuilder, 
              private postsService: PostsService , public events: Events){

    //   this.postsService.getPosts().subscribe(posts => {
    //   console.log(posts);
    //   this.posts=posts;
    // });

    this.dateExp = "";
    this.check = "Bus_fare";
    this.amount = 0 ;
    this.currency = "INR";
    this.expense = "";

    }
  closeModel()
  {
    this.viewCtrl.dismiss();
  }

  isValid()
  {
            if(this.dateExp === "")
            {
             let toast = this.toastCtrl.create({
                    message: 'please choose date',
                    duration: 2000,
                    position: 'bottom',
                    cssClass: 'toastColor'

                  });
            toast.present();
            return false;
          }

          if(this.dateExp > this.myDate)
          {
               let toast = this.toastCtrl.create({
                    message: 'Future Date is not allowed',
                    duration: 2000,
                    position: 'bottom',
                    cssClass: 'toastColor'
                      });
              toast.present();
              return false;
          }

          if( this.check === "")
            { 
              //console.log(this.check)
              let toast = this.toastCtrl.create({
                    message: 'select Description feild ',
                    duration: 1000,
                    position: 'bottom',
                    cssClass: 'toastColor'
                  });
              toast.present();
              console.log( 'select Description feild' );
              return false;
                }

             if( this.check === 'other')
             { 
              //console.log(this.check)
              let toast = this.toastCtrl.create({
                    message: 'please fill Other detail',
                    duration: 1000,
                    position: 'bottom',
                    cssClass: 'toastColor'
                  });
              toast.present();
              console.log( 'select Description feild' );
              return false;
                }

            if( this.currency === "")
            {
                let toast = this.toastCtrl.create({
                    message: 'choose currency type',
                    duration: 1000,
                    position: 'bottom',
                    cssClass: 'toastColor'
                  });
            toast.present();
                console.log( 'choose currency' );
                return false;

            }
            if( this.amount === 0 || this.amount === "" )
            {
                let toast = this.toastCtrl.create({
                    message: 'fill amount',
                    duration: 1000,
                    position: 'bottom',
                    cssClass: 'toastColor'
                  });
            toast.present();
                console.log( 'fill amount' );
                return false;
            }

          return true;
  }
  launchpage() 
  {

    if(this.isValid())
    {
            this.showPage = true;
            let data ={
                          date :   this.dateExp,
                          details :this.check,
                          amount : this.amount,
                          bill : this.billToggl,
                          currency : this.currency,
                          expense : this.expense,
                          showPage : this.showPage,
                      };
            this.navCtrl.push(HomePage,data);
          //   this.events.publish('myEvent', this.dateExp,this.check,this.amount,this.billToggl,this.currency,this.description,this.showPage);

              let toast = this.toastCtrl.create({
              message: 'item is added',
              duration: 1000,
              position: 'bottom',
              cssClass: 'saveToast'
              }); 
              toast.present();

            // this.navCtrl.pop();

        }
  }

}

interface Posts
{
  id : number;
  title : string;
  body : string;
}

And my "home.ts" is :

export class HomePage {
 additem= AddItemPage;
 public isToggled: boolean;
 public showPage : boolean = true;
 static arrs : arr[];
  date :any;
  details :any;
  amount :any;
  bill :any;    
  expense : string ;
  value :any;
  currency :string ;

  costCenter :string;
  wbs :string;
  Approver :string;
  billClient :boolean;
  exception :string ;
  Particulars : string ;



 constructor(public navCtrl: NavController, public modalCtrl: ModalController, public navParams :NavParams ,
  public alertCtrl: AlertController,public toastCtrl: ToastController,public http:Http)
  {

   HomePage.arrs=[{

        // costCenter :this.costCenter,
        // wbs :this.wbs,
        // Approver :this.Approver,
        // billClient :this.billClient,
        // exception :this.exception ,
        date:this.date,
        details :this.details ,
        currency : this.currency,
        amount : this.amount,
        bill : this.bill,
        expense : this.expense,
              }];

  HomePage.arrs.splice(HomePage.arrs.indexOf(HomePage.arrs[0],1));

  this.date = this.navParams.get('date');
  this.details = this.navParams.get('details');
  this.amount = this.navParams.get('amount');
  this.bill = this.navParams.get('bill');
  this.showPage = this.navParams.get('showPage');
  this.currency = this.navParams.get('currency');
  this.expense  = this.navParams.get('expense');


  this.costCenter = "Project1";
  this.wbs ="";
  this.Approver ="Manager1";
  this.billClient =false;
  this.exception = "";
  this.Particulars = "";


  this.abc(this.date,this.details, this.currency,this.amount,this.bill,this.expense);

  this.exception = "";

  }


  abc(a,b,c,d,e,f)
  {

    HomePage.arrs.push({
        // costCenter :this.costCenter,
        // wbs :this.wbs,
        // Approver :this.Approver,
        // billClient :this.billClient,
        // exception :this.exception ,
        date:this.date,
        details :this.details ,
        currency : this.currency,
        amount : this.amount,
        bill : this.bill,
        expense : this.expense
    });
    console.log(HomePage.arrs);
  }


 public notify() {
  console.log("Toggled: "+ this.isToggled); 

}

  isValidHome()
  {
            console.log(this.isToggled);
            if(this.isToggled == true)
              {
                if(this.exception === "")

                {      let toast = this.toastCtrl.create({
                              message: 'Please Fill Exception feild',
                              duration: 1000,
                              position: 'bottom'
                            });
                      toast.present();

                      return false;
                }
              }
                return true ;
  }

 Send()
 {
  if(this.isValidHome()){

    let alert = this.alertCtrl.create({
      title: 'Thank you ?',
      message: 'Your voucher no :1234',
      inputs: [
        {
          name: 'recurrent',
          label :'Add to recurrent',
          type : "checkbox",
          value :"true"
        }
      ],
      buttons: [
        {
          text: 'Ok',
          handler: () => {
            console.log(this.wbs);
            console.log(this.costCenter);
            console.log(this.Approver);
            console.log(this.billClient);
            console.log(this.exception);
             console.log(this.Particulars);

          }
        }, 
      ]
    });
    alert.present();
    }
  }

  Change(value)
  {
      console.log(value);
      if(value != "" )
      {
        this.costCenter = "";
      }
      else
      {
        this.wbs = "";
      }
  }

   Change1(value)
   {
     console.log(value);
     if(value != "" )
      {
        this.wbs = "";
      }
      else
      {
        this.costCenter = "";
      }
   }
}
interface arr{
  // costCenter :string;
  // wbs :string;
  // Approver :string;
  // billClient :boolean;
  // exception :string ; 
  date:String;
  details :String ;
  currency : String ;
  amount : number;
  bill : any;
  expense :string ;
 }

Upvotes: 1

Views: 511

Answers (1)

Gowtham
Gowtham

Reputation: 3233

Create a provider using the cli command ionic g provider providerName

Store your value in your provider.ts like this,

import { Injectable } from '@angular/core';

@Injectable()
export class Provider {
  public addedItems:any; 
  constructor() {
  }
  addedItems(data) {
    return this.addedItems=data;
  }
}

and import this provider in your home component to retrieve the added value

Upvotes: 2

Related Questions