To pass values ​​from html to page Ionic


#1

Hello!!

I have two pages:

  • view-profile
  • user-profile

In view-profile I can see the user data and in user-profile I can modify the user data. I need to be able to pass the modified data to my “view-profile” page. Updating the data at all times.

I currently have:

*user-profile.ts

import { Component } from '@angular/core';
import { IonicPage, NavController} from 'ionic-angular';

import * as states from './../../../../providers/states-service';

@IonicPage({
  name: 'userProfile',
  segment: 'userProfile'
})
@Component({
  selector: 'user-profile',
  templateUrl: 'user-profile.html'
})
export class UserProfileComponent {

  constructor(public navCtrl: NavController) {}

  goToProfile(){
      console.log("USERPROFILE: " + name);
      this.navCtrl.push(states.PROFILE_STATE, { name });
  }

}

*user-profile.html

<ion-card>
    <ion-card-content>
      <!-- <form (ngSubmit)="goToCompany()" #userForm="ngForm"> -->
      <form (ngSubmit)="goToProfile()" #userForm="ngForm">
        <ion-list>
            <img src="assets/img/user.png" />
            <ion-item>
                <ion-label>Nombre *</ion-label>
                <ion-input type="text" name="name" [(ngModel)]="name" required></ion-input>
            </ion-item>
            <ion-item>
  • view-profile.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage({
  name: 'viewProfile',
  segment: 'viewProfile'
})
@Component({
  selector: 'view-profile',
  templateUrl: 'view-profile.html'
})
export class ViewProfileComponent {
    constructor(public navCtrl: NavController, public navParams: NavParams) {}

    name = this.navParams.get('name');

    ionViewDidLoad(){
        console.log(this.navParams.get('name'));
    }

}

How can I do what I need?

Thanks for all!!