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 hav

Answer 1

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 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();

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

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

    getMessage(): Observable {
        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

Click here to test message 

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

The incoming message :  
  

{{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.