Published: February 07 2019

Angular 7 - Communicating Between Components with Observable & Subject

Built with Angular 7.2.3 and RxJS 6.4.0

Other versions available:

This is a quick tutorial to show how you can communicate between components in Angular 7 and RxJS. The tutorial example uses Webpack 4 for compiling + bundling and is styled with bootstrap 4.

The way to communicate between components is to use an Observable and a Subject (which is a type of observable), I won't go too much into the details about how observables work here since it's a big subject, but in a nutshell there are two methods that we're interested in: Observable.subscribe() and


The observable subscribe method is used by angular components to subscribe to messages that are sent to an observable.

The subject next method is used to send messages to an observable which are then sent to all angular components that are subscribers (a.k.a. observers) of that observable.

Angular 7 Component Communication Tutorial Example

Here's a simple example showing communication between the home component and the root app component via a message service using observables.

The tutorial code is available on GitHub at

(See on StackBlitz at

Running the Angular 7 Component Communication Example Locally

  1. Install NodeJS and NPM from
  2. Download or clone the tutorial project code from
  3. Install all required npm packages by running npm install from the command line in the project root folder (where the package.json is located).
  4. Start the application by running npm start from the command line in the project root folder.

Angular 7 Message Service

With the message service you can subscribe to new messages in any component with getMessage() method, send messages from any component with the sendMessage(message: string) method, and clear messages from any component with the clearMessages() method.

The clearMessages() method actually just sends an empty message by calling without any arguments, the logic to clear the messages when an empty message is received is in the app component below.

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

@Injectable({ providedIn: 'root' })
export class MessageService {
    private subject = new Subject<any>();

    sendMessage(message: string) {{ text: message });

    clearMessages() {;

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

Angular 7 App Component that Receives Messages

The app component uses the message service to subscribe to new messages and push them into the messages array which is displayed in the app component template. If an empty message is received then the messages array is cleared which automatically removes the messages from the UI.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { MessageService } from './_services/index';

    selector: 'app',
    templateUrl: 'app.component.html'

export class AppComponent implements OnDestroy {
    messages: any[] = [];
    subscription: Subscription;

    constructor(private messageService: MessageService) {
        // subscribe to home component messages
        this.subscription = this.messageService.getMessage().subscribe(message => {
          if (message) {
          } else {
            // clear messages when empty message received
            this.messages = [];

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks

Angular 7 Home Component that Sends Messages

The home component uses the message service to send messages to the app component.

import { Component } from '@angular/core';

import { MessageService } from '../_services/index';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent {
    constructor(private messageService: MessageService) { }

    sendMessage(): void {
        // send message to subscribers via observable subject
        this.messageService.sendMessage('Message from Home Component to App Component!');

    clearMessages(): void {
        // clear messages


Need Some Angular 7 Help?

Search fiverr to find help quickly from experienced Angular 7 freelance developers.

Follow me for updates

I share all new blog posts on Twitter and Facebook.

When I'm not coding

My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.


Supported by