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

Answer 1

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

1. Your first message ("I am from home.ts") is emitted before you subscribe to an observable. This is why you don't get it
2. 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.