Angular5 Manipulation Html Of Other Component Without Having Child/parent Relation

For my application I have to communicate with 2 components but these components don`t have a parent child relation. I use a service to set up this comminication. When I click on th

Solution 1:

There must be issue with your service communication, as far as I have used it, worked fine for me. Make sure you subscribe to the service in constructor of component in which you want to receive any value. In your case,

 import { Subject,Observable, of } from 'rxjs';
 code for service :
   public methodForRender = new Subject<any>();
   renderMe = this.methodForRender.asObservable();
   callMethodToRender(value) {
    this.methodForRender.next(value);
   }

 code for component 1 :  which is triggering function!

   constructor(private callingBridge: SharedService) {}
   this.callingBridge.callMethodToRender(this.value);

 code for component 2 :  which should be subscribed to service 

    constructor(private callingBridge: SharedService) {}
    this.callingBridge.renderMe.subscribe(
     (value) => {
        // do your stuff // call your function here to render html
       }
    );    

I hope it will help you!