Angular2: Send data from one component to other and act with the data

Question

I'm learning Angular2. In order to that, I have 2 components, on the click of one of the components, the other component should be notified and act with that.

This is my code so far:

export class JsonTextInput {
  @Output() renderNewJson: EventEmitter<Object> = new EventEmitter()
  json: string = '';

  process () {
      this.renderNewJson.next(this.json)
  }
}

The process function is being called on the click on the first component. On the second component I have this code:

export class JsonRendered {
  @Input() jsonObject: Object

  ngOnChanges () {
    console.log(1)
    console.log(this.jsonObject)
  }
}

The ngOnChanges is never runned, I dont get how to pass the info from one component to other

EDIT

There is an app component which is parent of those 2 components. None of both is parent of the other

This is how my clasess look now:

export class JsonRendered {
  private jsonObject: Object

  constructor (private jsonChangeService: JsonChangeService) {
    this.jsonChangeService = jsonChangeService
    this.jsonObject = jsonChangeService.jsonObject
    jsonChangeService.stateChange.subscribe(json => { this.jsonObject = json; console.log('Change made!') })
  }
}


export class JsonTextInput {
  json: string = '';

  constructor (private jsonChangeService: JsonChangeService) {
    this.jsonChangeService = jsonChangeService
  }

  process () {
    this.jsonChangeService.jsonChange(this.json)
  }
}

And the service

import {Injectable, EventEmitter} from '@angular/core';
@Injectable()
export default class JsonChangeService {
  public jsonObject: Object;

  stateChange: EventEmitter<Object> = new EventEmitter<Object>();

  constructor(){
    this.jsonObject = {};
  }

  jsonChange(obj) {
    console.log('sending', obj)
    this.jsonObject = obj
    this.stateChange.next(this.jsonObject)
  }

}

Answer 1

Create a service like so...

    import {Injectable, EventEmitter} from 'angular2/core';
@Injectable()
export class MyService {

  private searchParams: string[];

  stateChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(){

    this.searchParams = [{}];       

  }    

  change(value) {

    this.searchParams = value;
    this.stateChange.next(this.searchParams);        

  }

}

Then in your component...

import {Component} from 'angular2/core';
import {MyService} from './myService';   


@Component({
  selector: 'my-directive',
  pipes: [keyValueFilterPipe],
  templateUrl: "./src/someTemplate.html",
  providers: [MyService]    

})

export class MyDirective {

  public searchParams: string[];

  constructor(private myService: MyService) {
      this.myService = myService;
      myService.stateChange.subscribe(value => { this.searchParams = value; console.log('Change made!') })
  }

change(){

  this.myService.change(this.searchParams);

}

}

You have to subscribe to the eventemitter, then update your variable. The change event in the service would get fired of from something like...

 (click)="change()"