Sibling component interaction in angular 2

Question

I have included two components in one parent component.

app.component.html

<div class="row">
  <div class="col-lg-3"> 
    <app-facet></app-facet>
  </div>
  <div class="col-lg-9">
    <app-result></app-result>
  </div>
 </div>

I also have one shared Service which has two methods. getData() and setData().

getData() is called by App-Facet component to filter the data. setData() is called by App-Result component to get the data.

App-Facet component placed in the left hand side of the page which has filter form and App-Filter is placed at the right hand side of the page.

When i click on filter button in the filter form from App-Facet component, getData() method is called in my sharedService.ts file.

Now my doubt is, how can i call updateView() in App-Result component as soon as I called getData() from App-Facet component.

Complete code is available here: https://stackblitz.com/edit/angular-cf1xie

Answer 1

You need EventEmitter to emit the event on setdata() and subscribe that event to get that data :

Like this: you should call setdata() with data as parameter:

In your sharedService.ts file.

import { Injectable, Output, EventEmitter } from '@angular/core';
    @Injectable({
    providedIn: 'root'
     })
export class DataService{
      @Output() open: EventEmitter<any> = new EventEmitter();

    setdata(data){
    this.open.emit(data);
    }
}

in App-Facet component:

constructor(private data: DataService) { }
functionCall(){
this.data.setdata(data);
}

and in the function where you need this data . You need to subscribe this event like this:

in App-Result component :

constructor(private data: DataService) { }
    ngAfterViewInit() {
          this.data.changeClasss.subscribe(data => {
              this.yourData = data


                    });
    }

for more details have a look at: https://angular.io/api/core/EventEmitter