Angular 4 pass data between 2 not related components

Question

I have a questions about passing data in Angular.

First, I don\'t have a structure as

Answer 1

There are two solutions for this.

1. This can be done through shared service by using observable's.

2. You can use ngrx/store for this. This is similar to Redux arch. You will be getting data from state.

Answer 2

if component are not related than you need use Service

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 3

Here is the simplest example of sharing data between two independent components, using event emitter and service

https://stackoverflow.com/a/44858648/8300620

Answer 4

This is a case where you want to use a shared service, as your components are structured as siblings and grandchildren. Here's an example from a video I created a video about sharing data between components that solves this exact problem.

Start by creating a BehaviorSubject in the service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Then inject this service into each component and subscribe to the observable.

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

You can change the value from either component and the value will be updated, even if you don't have the parent/child relationship.

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}

Answer 5

When you mention non related components, I'm gonna assume that they don't have any parent component. If assumption isn't correct, feel free to read another of my answers where both cases are addressed.

So, as there's no common parent, we can use an injectable service. In this case, simply inject the service in the components and subscribe to its events.

(Just like the next image shows - taken from here - except that we'll inject the service in two Components)

The documentation explains it quite well how to Create and register an injectable service.