Display data in a table in new page by accepting it from the user

Ionic Framework ionic-v3
1

I want to create a form which accept the values from the user,stores it ans display it in a table in another page.
I
am able to create a form, store the data in the local storage but i am
unable to display it in the another page in a table format.
I got number of tutorials which explains how to pass data,but how to show it in a table format is not there…
Please help me with this

This is my createaccountform.html file:


<ion-header>
  <ion-navbar>
    <ion-title>Create Account</ion-title>
  </ion-navbar>
</ion-header>
<ion-content class="background">
  <ion-card> 
   <ion-card-header>      Create Your Account(s)    </ion-card-header>    <ion-card-content>     
     <ion-list>
    <ion-item>  
      <ion-label>Name of the Account</ion-label>    
   <ion-input type="text" [(ngModel)]="account.name" name="Name">
</ion-input>
      </ion-item>     
 <ion-item>    
    <ion-label>Pay Budget Period</ion-label>  
      <ion-textarea [(ngModel)]="account.budget" name="Budget">
</ion-textarea>  
    </ion-item>     
 <ion-item>      
  <ion-label>Opening Balance</ion-label>      
  <ion-textarea [(ngModel)]="account.balance" name="Balance">
</ion-textarea>   
   </ion-item>  
    <label for="yes" class="control-label">Create another Account
</label>     
 <ion-list radio-group >          
      <input type="radio" (ng-model)="account.yes " name="yes"> YES      
   <input type="radio" (ng-model)="account.no" name="yes"> NO      </ion-list> 
 <button ion-button block  (click)="addaccount()" color="blue">
 Add Account</button>        
      </ion-list>       
  </ion-card-content>
  </ion-card> 
 </ion-content>

This is my creataccount.ts file:

export class CreateAccountPage 
{
    account :any= {}; 

   registers:any={};     
       constructor(public navCtrl: NavController, public navParams: NavParams,public store:AddaccountProvider )
 {           
  }
    ionViewDidLoad() {  
      // console.log('ionViewDidLoad CreateAccountPage');   
 }    
addaccount()  
  {

       console.log(JSON.stringify(this.account));    
        this.store.set(JSON.stringify(this.account));    
         }

This is my table.html file:

ion-content class="background">
<div class="header" align="center">Permanent Account Form</div> 
   <table>  
     <tr>    
    <td>Name of Account</td>      
  <td>Pay Budget Period</td>     
   <td>Opening Balance
</td>   
     <td>Date</td>   
     <td>Details</td> 
       <td>Withdrawl</td> 
       <td>Deposit</td>    
    <td>Balance</td>  
    </tr>
    </table> 
 </ion-content>

this is my storage Provider.ts:

export class AddaccountProvider
 {
  constructor(public http: Http,private storage:Storage)
 {   // console.log('Hello AddaccountProvider Provider'); 
 }
set(account)
{
  this.storage.set('create',account);
}
get()
{
  return this.storage.get('create');
}
delete()
{
}

Please help me display the table by accepting those values in createaccountform.

2

Are you getting any errors in console??

3

I’m not sure storage is a great fit here. How about just having AddaccountProvider expose an account property and assign to that? Then you can just do this:

class OtherPage {
  account: Account;
  constructor(aap: AddaccountProvider) {
    this.account = aap.account;
  }
}

<tr><td>Name</td<td>{{account.name}}</td></tr>
<tr><td>Budget</td><td>{{account.budget}}</td></tr>

I would recommend using Ionic`s grid instead of HTML tables, but the same fundamental principle applies. Storage only makes sense when you need the data to persist across application restarts, and I doubt that’s the case here.

4

Please elaborate the statement:

How about just having AddaccountProvider expose an account property and assign to that?

5 
AddAccountProvider {
  account: Account;
}

CreateAccountPage {
  account: Account;
  constructor(private _aap: AddAccountProvider) {}
  addAccount(): void {
    this._aap.account = this.account;
  }
}
6

Ok thanks,I will be trying this I have to include this in createaccount page…