0

I want to show my component data into other component using service. i have 3 component.

service.ts

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

@Injectable()


export class GlobalserviceService {

  private _listners = new Subject<any>();

  listen(): Observable<any> {
    return this._listners.asObservable();
  }    

  filter(filterBy: string) {
    this._listners.next(filterBy);
  }
}

component one

mapLegends = [
    {
      name: 'hello',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 1',
      checked: true,
  color:'#7dc55c'
    },
]

component two

mapLegends = [
    {
      name: 'hello 3',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 4',
      checked: true,
  color:'#7dc55c'
    },
]

component three

mapLegends = [
    {
      name: 'hello 5',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 6',
      checked: true,
  color:'#7dc55c'
    },
]

i want each component data into other component. i do not want to use input or output property.

its a sibling component

it would be great help to give me demo

Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
Manish Salunke
  • 63
  • 1
  • 10

1 Answers1

0

Angular has no strict rules for sibling component communication. If the @Input/@Output decorators are not suitable solution for you, than you could simply create "shared service" register it as singelton and inject them where they are needed - Example "Unrelated Components: Sharing Data with a Service" paragraph is what you are looking for . If you need to catch events instead of data you could use the EventEmitter. Working example is available in this post.

Deniss Kulakov
  • 220
  • 2
  • 6