How to share data between angular components which are not directly linked with each other?

You can use a shared service to pass data between components. When you have data that changes over time, RxJS BehaviorSubject will be very useful in this case.That it will ensures that the component always receives the most recent data.

To do so,

you need first to create a service in which you will add a private BehaviorSubject that will hold the current value of the message that you want to share between components. And two methods, one to handle the current data stream as an observable that will be used by the components and the other to update the value of the message.

data.service.ts

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');

  constructor() {}

  fetchMessage(): Observable<string> {
    return this.messageSource.asObservable();
  }

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

}

Once the service is created, you need just to inject it in your components' constructor then call its methods fetchMessage/sendMessage in order to get or change your message value.

So,here is how you can use it to pass data from parent to child for example:

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'parent',
  template: `
    {{message}}
    <button (click)="newMessage()">send Message</button>
  `
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

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

  newMessage() {
    this.data.sendMessage("Hello from Parent Component")
  }

}

child.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'child',
  template: `
    {{message}}
  `
})
export class ChildComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

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

}

Hope this may help you.

in this demo, I am passing a value from app.component.ts to view component.component.ts using test.service

Here, in the constructor of app.component.ts giving a value to a variable which is in test.service, then assigning that value to a variable into view component.component.ts.

The way to do this is using observables. you can use Subject or Behavioral subject as you need. Then you can subscribe from another component and act accordingly. So the implementations are as follows:

@Injectable({ providedIn: 'root' })

export class MessageService { private subject = new Subject();

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

clearMessages() {
    this.subject.next();
}

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

So in another component you can subscribe like below:

constructor(private messageService: MessageService) {
    // subscribe to home component messages
    this.subscription = this.messageService.getMessage().subscribe(message => {
      if (message) {
        this.messages.push(message);
      } else {
        // clear messages when empty message received
        this.messages = [];
      }
    });
}

And for the emmitting part we can do below:

export class HomeComponent {
constructor(private messageService: MessageService) { }

sendMessage(): void {
    // send message to subscribers via observable subject
    this.messageService.sendMessage('Message from Home Component to App Component!');
}

clearMessages(): void {
    // clear messages
    this.messageService.clearMessages();
}
}

These are just example code picked, You can add multiple subscriptions as you want.