javascript - How to pass a value from one component to another component Angular 2 (No parent child relationship)

Question

Hi i have two components, component1 and component2. And i have a value, lets say x, and i want to pass the value to one of my component in my app, both have no parent-child or any relationship each other. How can i get the value x in component2 which is been set or created in component1? I know i can use local storage to set the value and get anywhere. Other than that is there any other way to do this? Sorry am new to Angular. Any idea guys? Thanks in advance. currently what i have done in my component1:

window.localStorage.setItem('myVal', JSON.stringify(x));

and in my component2:

let getmyVal: any = JSON.parse(localStorage.getItem("myVal"));

Answer 1

Since there is no relationship between the components, the easiest approach is to go for a publisher-subscriber model. Any component can publish any message, and any other component can subscribe to the said message, using the Observable.

Here is a sample Alert Service we created in one of our application

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

@Injectable()
export class AlertService {
    private subject = new Subject<any>();
        
    constructor() {
    }

    alert(alertType: string, objData: any) {
        this.subject.next({ type: alertType, data: objData });
    }

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

}