How can I pass data between component A to a component B without having a parent-child relationship in Angular 6/5/4

Question

I dont know how to pass a data or variable between two components in angular 6 , I accept any sugestion, please HELP ME

Answer 1

Your required solution is available in this tutorial written by Jeff Delaney.

Unrelated Components: Sharing Data with a Service

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS BehaviorSubject very useful in this situation.

You can also use a regular RxJS Subject for sharing data via the service, but here’s why I prefer a BehaviorSubject.

1. It will always return the current value on subscription - there is no need to call onnext
2. It has a getValue() function to extract the last value as raw data.
3. It ensures that the component always receives the most recent data

In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable.

Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it’s automatically broadcast to all other components.

data.service.ts:

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

@Injectable()
export class DataService {

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

  constructor() { }

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

}

parent.component.ts

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)
  }

}

sibling.component.ts:

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 2

As shown in this example, you can have your component where you want to receive a parameter and add an import like this:

@Component({
  selector: 'app-astronaut',
  template: ...
})
export class AstronautComponent implements OnDestroy {
  @Input() astronaut: string;
}

And in the html component where you want to pass that data you can do this:

<app-astronaut 
  [astronaut]="astronaut">
</app-astronaut>

Answer 3

You can use a shared service and then inject that in your component. Some good explanations you can find here, an example would be:

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
@Injectable()
export class SharedService {
 private msgRoot = new BehaviorSubject<string>("default message");
 currentMsg = this.msgRoot.asObservable();
 changeMessage(message: string) {
   this.msgRoot.next(message);
 }
}

And in the component:

export class ParentComponent implements OnInit {
  message = "Default message!";
  nMsg;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMsg.subscribe(msg => (this.nMsg = msg));
  }

  receiveMessage($event) {
    this.nMsg= $event;
  }
}