How to send data to another page without moving from the actual?


#1

Hello guys!

Im a newbie using this framework, but totally im in love with it, just how fast and easy it does it all, its wonderful.
I’m making a simple app, where i can choose between a lot of exercises to do in the gym, and then when i choose them it displays some information about them, how to do it properly , benefits etc etc…

My problems comes when I choose an exercise, i would like to send this exercise, which is an item which has name, descripcion… to another array of items which is on another page, and then when the user presses this another page tab , display the selected exercises there.

My code is the next:
ejerciciosprincipiante.ts

export class EjerciciosprincipiantePage {
  listaEjerciciosPrincipiante=[];
  constructor(public navCtrl: NavController, public navParams: NavParams,public alertCtrl: AlertController) {
    this.listaEjerciciosPrincipiante = [
      {
        'title': 'Elevaciones de piernas en cuatro tiempos',
        'icon': 'flame',
        'description': 'En primer lugar vamos a trabajar la parte inferior de la pared abdominal. Para ello os recomendamos comenzar con las elevaciones de piernas en cuatro tiempos. Simplemente nos colocaremos boca arriba sobre la esterilla. Las manos detrás de la nuca y el cuerpo estirado.Con esta postura, y concentrándonos en la parte inferior del abdomen, elevaremos primero la pierna derecha que mantendremos arriba mientras elevamos la izquierda, que mantendremos a su vez arriba mientras bajamos de nuevo la derecha. Finalmente bajaremos la izquierda y lo mismo lo repetiremos 20 veces.',
        'color': '#E63135',
        'ruta':'../assets/imgs/sdasfdfsd.jpg',
        'encasa':'si',
        'equipamiento':'opcional',
        'difilcutad':'facilisimo',
        'extra':'bajo'
      },
      {
        'title': 'Elevaciones de pelvis',
        'icon': 'heart',
        'description': 'Para continuar realizaremos otro ejercicio para la parte inferior. Se trata de las famosas elevaciones de pelvis. Simplemente mantendremos la postura boca arriba y cambiaremos los brazos, que colocaremos en la zona lumbar. De este modo elevaremos las piernas, que mantendremos juntas, y en esta postura, y focalizando toda la tensión del ejercicio en la zona inferior, elevaremos las piernas hacia arriba. El truco para hacerlo bien, imaginar que tenemos un hilo que tira de los pies hacia arriba. De este modo elevaremos las piernas. No es necesario elevar mucho la pelvis del suelo, sino que es importante sentir la tensión en la zona trabajada.',
        'color': '#0CA9EA',
        'ruta':'../assets/imgs/450_1000.jpg',
        'encasa':'si',
        'equipamiento':'no',
        'difilcutad':'facil',
        'extra':'bajo'
      },
      {
        'title': 'Patadas de rana',
        'icon': 'flame',
        'description': 'En tercer lugar os recomendamos un ejercicio para trabajar la parte media del abdomen y la superior, se trata de las patadas de rana. En este caso solamente nos apoyaremos por los glúteos y las manos al suelo. Colocaremos las piernas en alto en el aire y las adelantaremos a la vez que el tronco lo llevamos hacia atrás, para luego juntar ambas partes del cuerpo. El punto de unión será la pared abdominal que es donde recaerá toda la tensión del ejercicio.',
        'color': '#F46529',
        'ruta':'../assets/imgs/leg_tucks_seated.gif',
        'encasa':'si',
        'equipamiento':'no',
        'difilcutad':'media',
        'extra':'bajo'
      },
      {
        'title': 'Contracciones abdominales tumbados sobre el suelo',
        'icon': 'flash',
        'description': 'Como cuarta alternativa os vamos a proponer un ejercicio para la parte superior del abdomen. Se trata de las contracciones de abdominales tumbados en el suelo. Para ello volveremos a tumbarnos boca arriba con las manos en la nuca. En esta posición lo que haremos será elevar el tronco mediante la acción abdominal. Es importante mantener la columna recta y no doblar el cuello hacia delante, ya que podemos hacernos daño en las cervicales. Las piernas en este caso pueden dar más intensidad al ejercicio. Si las apoyamos en el suelo será más fácil que si las colocamos medio levantadas o levantadas del todo, donde se aumentará la intensidad.',
        'color': '#FFD439',
        'ruta':'../assets/imgs/crunch.jpg',
        'encasa':'si',
        'equipamiento':'opcional',
        'difilcutad':'baja/media',
        'extra':'moderado'
      },
      {
        'title': 'Crunch con empuje de las manos',
        'icon': 'flame',
        'description': 'Otra variante de este ejercicio es el conocido como Crunch con empuje de las manos. Colocados boca arriba con los pies apoyados al suelo y los brazos juntos y hacia adelante elevaremos el tronco. Para ello los brazos serán una parte importante del ejercicio, pues ellos marcarán el camino a seguir con la espalda, ya que los llevaremos hacia adelante mientras elevamos el tronco mediante la acción del abdomen. Es importante no doblar la espalda y concentrar todo el empuje en la zona abdominal.',
        'color': '#CE6296',
        'ruta':'../assets/imgs/maxresdefault.jpg',
        'encasa':'si',
        'equipamiento':'no',
        'difilcutad':'media',
        'extra':'bajo'
      },
      {
        'title': 'Flexiones de pie a pie',
        'icon': 'flash',
        'description': 'En último lugar recomendaremos un ejercicio para la parte de los oblicuos. Para ello os recomendamos las flexiones pie a pie. La postura es la misma, boca arriba, solo que en este caso los brazos van a cada lado del cuerpo. En este ejercicio los pies están apoyados en el suelo y las rodillas flexionadas. Lo que haremos será intentar tocar el pie con el brazo correspondiente a la vez que elevamos el tronco mediante la acción de los abdominales. Al realizar el giro para tocar los pies incidiremos en la parte de los oblicuos, aunque es necesario que tengamos conciencia de ello para mejorar los resultados del ejercicio.',
        'color': '#78BD43',
        'ruta':'../assets/imgs/ejercicios-faciles7.jpg',
        'encasa':'si',
        'equipamiento':'no',
        'difilcutad':'media',
        'extra':'bajo'
      },
      {
        'title': 'Estiramientos abdominales',
        'icon': 'flame',
        'description': 'Una vez terminada la rutina es importante que realicemos estiramientos. Para ello nos colocaremos boca abajo con todo el cuerpo estirado y las palmas de las manos apoyadas en el suelo. De este modo elevaremos el tronco estirando toda la parte delantera, es decir, la zona abdominal. Esto nos ayudará a mejorar y acelerar la recuperación después del ejercicio.',
        'color': '#3575AC',
        'ruta':'../assets/imgs/84649997.jpg',
        'encasa':'si',
        'equipamiento':'no',
        'difilcutad':'media/alta',
        'extra':'bajo'
      },
      
    ]
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EjerciciosprincipiantePage');
  }
  openNavDetailsPage(item){
    this.navCtrl.push(MasinfoPage,{item:item});
  }

those are my items, and when the user clicks one of them it goes to another page which is for printing details:
this is the details Page :

export class MasinfoPage {
  item;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.item = navParams.data.item;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MasinfoPage');
  }
  
  enviarRutina(item) {
    this.navCtrl.push(AboutPage,item);
  }
  

}

it displays everything well in the html and stuff, but also in the html is a button which sends this exercise to another Page, the fuction “enviarRutina” does it, but first i dont want to change the page, maybe just a notificación could display which says something like “succesfully added” and then when i press the “Added exercises tab” i would to see the added exercises… How i could accomplish that? I know it shouldn’t be that hard but im missing something for sure… HELP


#2

You could have openNavDetailsPage() open MasinfoPage in a modal, instead of another page. Then the modal would have a ‘save’ button, which when pressed, would call enviarRutina(item) to redirect to the “Added Exercises” tab.

Hope this helps.


#3

Thank you for your answer my friend obin!

I’ve made it by researching a little on the web and found that using providers/services is pretty easy to send data between pages withot using the navcontroller, is pretty easy and really usefull! Thank you for your answer btw!