Angular 6 - Passing messages via service to from component to message component

Question

I am trying out how to pass a message from app.component.ts to be displayed in messageComponent.ts

on app.component.html I have added <app-messagecomponent></app-messagecomponent>

Add the moment it's just showing nothing.

I also have a method in a service:

message.service.ts

message(message) {
    return message;
}

So what I want to do to pass a message from other components via the message service so it's displaying in the app-messagecomponent.html

For example from app.component.ts:

sendMessageToService() {
    this.myservice.message('my Message to be displayed in the messageComponent');
}

How can I do this?

you can check my answer if you want to pass message using a service to another component. — Niladri, May 16 '18 at 14:04

score 30 · Accepted Answer · answered May 16 '18 at 14:02

In this case to pass a message from one component to another component using a service , you can create a global message bus or event bus (publish/subscribe pattern).

For this we need the Subject (to emit values using .next() method) and Observable (to listen to the messages using .subscribe() ) from Rxjs which is now an essential part of angular 6. (For this example I am using Rxjs 6 along with rxjs-compat package)

Here we will be sending a message using MessageService class which is declared as @Injectable to inject as a dependency in component. The message will be emitted on a button click from app.component.html . The same message will be retrieved in message.component.ts to show it in the html template message.component.html. We will include the selector for MessageComponent which is <app-messagecomponent></app-messagecomponent> in the app.component.html.

Here is the complete code below

message.service.ts

import { Injectable } from '@angular/core';
import { Observable,Subject} from 'rxjs';

@Injectable()
export class MessageService {
    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';

  constructor(private service:MessageService){}

  sendMessage(): void {
        // send message to subscribers via observable subject
  this.service.sendMessage('Message from app Component to message Component!');   
  }

  clearMessage():void{
    this.service.clearMessage();
  }
}

app.component.html

<button (click)="sendMessage()">Click here to test message</button> <br><br>
<app-messagecomponent></app-messagecomponent>

message.component.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService } from './message.service';

@Component({
    selector: 'app-messagecomponent',
    templateUrl: 'message.component.html'
})

export class MessageComponent implements OnDestroy {
    message: any = {};
    subscription: Subscription;

    constructor(private messageService: MessageService) {
        // subscribe to app component messages
        this.subscription = this.messageService.getMessage().subscribe(message => { this.message = message; });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

message.component.html

<p>The incoming message :  </p>  <br>
{{message?.text }}

Here I have used Elvis operator in case the message is undefined .

Here is a working demo : https://stackblitz.com/edit/rxjs-snaghl

Let me know if you are looking for something like this.

please provide me the example for to communicate two unrelated components sharing there information. And I am confused in folder structure also.(It needs to be two components with their own name and we must share data between them by using services. — user3669026, Aug 30 '19 at 06:26
this is nice explanation i got it but I want the explanation for two unrelated component example : Homecomponent and ProductDetailComponent... And I need to send data from home to prdouct details component...Please get back to me with your answer. Thanks in advance. — user3669026, Aug 30 '19 at 06:28
@user3669026 this is applicable for any component. not only parent child — Niladri, Aug 30 '19 at 09:17
Thanks niladri. It means that either it is parent child relationship or unrelated components for both the approaches it is applicable? — user3669026, Aug 30 '19 at 10:15
@AlokRajasukumaran Sorry didn't get you .. do you mean unsubscribe()? — Niladri, Jun 22 '20 at 18:12
@Niladri the .subscribe method is deprecated now and I was going through all these examples. sometimes it works but sometimes it does not. — Alok Rajasukumaran, Jun 23 '20 at 10:49
@AlokRajasukumaran which version are you using?Rxjs and Angular — Niladri, Jun 24 '20 at 20:51
@AlokRajasukumaran it's not obsolete only a particular signature is obsolete. Check this https://stackoverflow.com/questions/55472124/subscribe-is-deprecated-use-an-observer-instead-of-an-error-callback — Niladri, Jun 24 '20 at 20:53
as i have commented there, now it turns out all that functions are marked obselete. — Alok Rajasukumaran, Jun 25 '20 at 05:58
@AlokRajasukumaran works perfectly for Rxjs 6.5.4 https://stackblitz.com/edit/fromfetch-jxvurn?file=index.ts — Niladri, Jun 25 '20 at 20:58
Let me try this code. I am having issues with same code in NGX-ADMIN dashboard — Alok Rajasukumaran, Jun 28 '20 at 09:46

score 2 · Answer 2 · answered May 16 '18 at 13:33

you can use input for the same

< app-messagecomponent [YourInputVariableName]= "YourMessage" >< /app-messagecomponent>

in app.compnent write

YourMessage:any='my Message to be displayed in the messageComponent';

in app-message.component write

@Input YourInputVariableName:any;

you can print message in app-messagecomponent by this.YourInputVariableName

score 0 · Answer 3 · answered Aug 04 '20 at 16:13

Use ng-interconnect library. This allows sending data form any angular entity to another.

You can do broadcasting or receiving from multiple points.

Broadcasting example -

let messageStream: IMessageStream = createBroadcaster('home/stateChanged');   //Create a broadcaster```
 
 ...
 ...
 /*Receive from it from another component somewhere in the hierarchy*/
 
 let userReceiver = receiveFrom('home/stateChanged', 'contacts/user', (data, error, complete) => {
  console.log(data);
  console.log(error);
  console.log(complete);
 })
 
 
 '''
 '''
 /*Broadcast messages from the first component*/
 nessageStream.emit('logged-in');

Angular 6 - Passing messages via service to from component to message component

3 Answers3

Linked