How To Share Data Between Components Using Subscription And Subject In Angular 6

While working on a problem, I needed to search a data using the auto search functionality in Angular and had to pull the records from API and populate the data into the search box so that the user can select the records. Based on the selected data, all the records had to display on the screen. As it was a huge data, so I had used loading spinner functionality to avoid the confusion. In this case, all the data was fetched through API and bind into the data table.

As we know that there were following ways to share the data between components.

1. Parent to Child: Sharing Data via Input
2. Child to Parent: Sharing Data via ViewChild
3. Child to Parent: Sharing Data via Output() and EventEmitter

Apart from the above approach, we can use the sharing service to pass the data between components.

There was a scenario where we can show the number of records based on the search data. There were two separate components named header and product was created to achieve the problem.

Solution

I had used an ngx-spinner and message service to achieve this functionality. If you look closely at the application you can see that there is a search bar in the top header which is used to search the data and the record is displayed based on the search record. You can set auto-search functionality in this case. Because when we start the search, it will automatically populate the data which you want to search and based on the data you need to apply to the spinner functionality as it might take few seconds to load the data if it is a huge number of record.

I have created a sample POC to illustrate the use of shared service using subject and subscription to pass the data between components.

Following things are used to develop this POC.

1. Angular 6,
2. Bootstrap 4
3. Add the required packages like ngx-spinner, primeng.

I would suggest you download the sample code and explore for more information.

Create a Header component and design accordingly.

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageServiceService } from '../services/message-service.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  searchText:any;
  constructor(private message_service: MessageServiceService) {

  }

  ngOnInit() {

  }
  onSearch() {
    this.message_service.sendProductId(this.searchText);
  }

}

Create product component and design accordingly

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageServiceService } from '../../services/message-service.service';
import { UserService } from '../../services/user.service';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  subscription: Subscription;
  productName: string;
  productList: any;
  constructor(private message_service: MessageServiceService, private productService: UserService,private spinner: NgxSpinnerService) {
    this.subscription = this.message_service.getProductID().subscribe(message => {

      this.productName = message.text;
      if (this.productName) {
        this.getProduct(this.productName);
      }
    });
  }

  ngOnInit() {
    this.productList = this.productService.getProductData();
  }
  getProduct(name) {
    this.spinner.show();
    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
      this.productList=this.productService.getProductDataByName(name);
  }, 5000);
    //this.productList=this.productService.getProductDataByName(name);
    // this.spinner.hide();
  }

}

Create shared service

message-service.service.ts

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

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

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

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

The output of the application will look like below,

Screen 1

When you run the application you will get all the data showing on the screen.

 

 

Screen 2

Enter the product what you want to search and click on search button.

 

 

Screen 3