Sharing data loaded with HTTP GET between Angular 6 components

Question

I am few days Angular 6 developer ;) and reading about sharing data between components. I have situation when I need to use Service.

I have two components.

First: ClientSearchComponent that read data from backend and transform json response to array of Client objects.

Second: ListClientComponent with template where I will have table of those Clients from ClientSearchComponent

Question is: How to sharing this array of Clients objects from one to other - my code dosn't work ? I found some exmaples but they use BehaviorSubject which as param get string not array.

My code

ClientDataService.ts:

import {Injectable} from '@angular/core';
import {Client} from '../models/client';

@Injectable()
export class ClientDataService {

  private data: Client[];

  setData(clients: Client[]) {
    this.data = clients;
  }

  getData() {
    return this.data;
  }
}

ClientSearchComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientSearchService} from './client-search.service';
import {ClientDataService} from '../services/client-data.service';

@Component({
  selector: 'app-client-search',
  templateUrl: './client-search.component.html',
  styleUrls: ['./client-search.component.css']
})

export class ClientSearchComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientSearchService: ClientSearchService, private clientDataService: ClientDataService) {
    const css = this.clientSearchService.list('assets/test.json');

    css.subscribe((clients: Client[]) => {
      this.clientList = clients;
      this.clientDataService.setData(clients);
    });

  }

  ngOnInit() {}

}

ClientListComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientDataService} from '../services/client-data.service';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.css']
})

export class ClientListComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientDataService: ClientDataService) {

    console.log(this.clientDataService.getData());
  }

  ngOnInit() {
  }

}

please make use of https://ngrx.io/ for global state management in angular — Abdulla Thanseeh, Feb 27 '19 at 12:29
Check [Component Interaction](https://angular.io/guide/component-interaction) and [3 ways to communicate between Angular components](https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb) Also, possible duplicate of [How do I share data between components in Angular 2?](https://stackoverflow.com/questions/31026886/how-do-i-share-data-between-components-in-angular-2?rq=1) — Pushkar Adhikari, Feb 27 '19 at 12:29

Daniel Częstki · Answer 1 · 2019-02-27T14:09:25.773

Ok. I did it :)

I need to use Subject from xrjs. My first method work for static data. In my situation I get data via service from backend so when objects are created we do not have data from backed yet.

Here is correct code:

ClientShareService.ts

import {Injectable} from '@angular/core';
import {Client} from '../models/client';
import {Subject} from 'rxjs';

@Injectable()
export class ClientsShareService {

  public shareDataSubject = new Subject<any>();

  public setData(clients: Client[]) {
    this.shareDataSubject.next(clients);
  }

  public getSubject() {
    return this.shareDataSubject;
  }
}

ClientsSearchComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientSearchService} from './client-search.service';
import {ClientsShareService} from '../services/clients-share.service';

@Component({
  selector: 'app-client-search',
  templateUrl: './client-search.component.html',
  styleUrls: ['./client-search.component.css']
})

export class ClientSearchComponent implements OnInit {
  public client: Client = new Client();
  public clientList: Client[];

  constructor(private clientSearchService: ClientSearchService, private clientsShareService: ClientsShareService) {
    const css = this.clientSearchService.list('assets/test.json');

    css.subscribe((clients: Client[]) => {
      this.clientList = clients;
      this.clientsShareService.setData(clients);
    });

  }

  ngOnInit() {}
}

ClientsListComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientsShareService} from '../services/clients-share.service';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.css']
})

export class ClientListComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientsShareService: ClientsShareService) {

    this.clientsShareService.getSubject().subscribe(clients => {
      this.clientList = clients;
      console.log(clients);
    });
  }

  ngOnInit() {
  }

}

Sharing data loaded with HTTP GET between Angular 6 components

1 Answers1