How to set data into a service and the get in another page Ionic 4/5

Question

I hope someone can help me

I want to send data from one page and then use it in another page from a service.

This is the parent component.ts

import { Component } from '@angular/core';
import { ShareService } from '../share.service';



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  message:string = 'I am from home.ts';

  constructor( private shareSvc: ShareService ) {}

  ngOnInit() {
    this.shareSvc.sharedMessage.subscribe(message => this.message = message)


  }

}

This is my service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ShareService {
  private message = new BehaviorSubject<any> (null) ;
  sharedMessage = this.message.asObservable();

  constructor() { }

  nextMessage(message: string) {
    this.message.next(message)
  }
}

And Finally, this is my last component where i want to get the data from home / service

import { Component, OnInit } from '@angular/core';
import { ShareService } from '../share.service';



@Component({
  selector: 'app-pagina2',
  templateUrl: './pagina2.page.html',
  styleUrls: ['./pagina2.page.scss'],
})
export class Pagina2Page implements OnInit {

  message:string;

  constructor( private shareSvc: ShareService) { }

  ngOnInit() {

    this.shareSvc.sharedMessage.subscribe(message => this.message = message)

    console.log(this.message);

  }




}

If is neccesary, i'll post my page2 html:

<ion-header>
  <ion-toolbar>
    <ion-title>pagina2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h1>Message from Service and Home : {{message}}</h1>


</ion-content>

this is the result: enter image description here

Does this answer your question? [Ionic 3 - Sending data to service from component](https://stackoverflow.com/questions/49435710/ionic-3-sending-data-to-service-from-component) — Tomas Vancoillie, Jun 17 '20 at 08:25

Sergey Mell · Accepted Answer · 2020-06-18T00:06:57.183

1

Actually, you have two issues which prevent you from seeing any of your messages

Your first message ("I am from home.ts") is emitted before you subscribe to an observable. This is why you don't get it
Your second message emitting and subscribing is done correctly. However, you never call the newMessage method. That's why you don't get this second message.

Please, take a look - I've made a small demonstrating example so you could see what I'm talking about.

P.S. By the way, your code could be simplified a bit using the async pipe and removing unnecessary transforming BehaviorSubject to a simple Observable. See the example here.

Update

I would like something like this: 112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/… But, only i want a communication between sibling components... Using 3 components (Home.ts, Page2.ts and Service)

Then your solution could look as follows. Just inject your service in all the components you need and use its method for sending messages and it's message property for subscribing on upcoming messages.

edited Jun 18 '20 at 00:06

answered Jun 17 '20 at 05:48

Sergey Mell

7,780
1
26
50

I understood but, in your example you're only using one component, I apologize if I did not explain myself well. my purpose is create a set function and a get function into service In home.ts i want to send value data using set function and then in my pagina2.ts get the value data of the service which would be the same value fetched from home.ts. – Roman Isidor Jun 17 '20 at 17:42
I'm not sure I get what you want. Actually, if you take a look at my first example - it's almost copy-paste of your one, And it has two components - `app.component` and `hello.component`. Would be great if you provide some minimal reproducible example [here](https://stackblitz.com/) so I could help you better – Sergey Mell Jun 17 '20 at 18:07
I would like something like this: https://112bsimtvcd2kuxvj2ww2jkd-wpengine.netdna-ssl.com/wp-content/uploads/2019/01/Components_Shating_Data_Via_Service.mp4?_=2 But, only i want a communication between sibling components... Using 3 components (Home.ts, Page2.ts and Service) – Roman Isidor Jun 17 '20 at 23:43

v_char · Answer 2 · 2020-06-17T05:54:51.500

Try this. When the template loads, maybe the message hasn't fetched from the service yet. And, also, you have to call the newMessage onInit, or assign it on a click event

<ion-header>
  <ion-toolbar>
    <ion-title>pagina2</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="message">
  <h1>Message from Service and Home : {{message}}</h1>
</ion-content>

 **pagina.ts**



    ngOnInit() {
    this.shareVc.sharedMessage.subscribe(message => {
      this.message = message;
    });
    this.newMessage();
  }

  newMessage() {
    this.shareVc.nextMessage('I am from page 2');
  }

score 0 · Answer 3 · answered Jun 18 '20 at 08:53

Rather than declaring the behaviourSubject as private, you should declare it public..

public message = new BehaviorSubject({});

and then, use message.next(value); from anywhere in your app by importing the service..

you can subscribe to this, message.subscribe() or get one time value message.getValue() or in html use async pipe

You don't need this sharedMessage = this.message.asObservable();

How to set data into a service and the get in another page Ionic 4/5

3 Answers3