How to share data/change between components

You could leverage shared service for this. It could contain both data and observables to subscribe on to be notified when data are updated.

• Service

  export class ListService {
    list1Event: EventEmitter<any> = new EventEmitter();
  
    getLists() {
      return this.http.get(url).map(res => res.json())
        .subscribe(
          (data) => {
            this.list1Event.emit(data.list1);
          }
        );
    }
  }
  

• Component

  @Component({
    selector: 'my-component1',
    template: `
      <ul>
       <li *ngFor="#item of list">{{item.name}}</li>
      </ul>
    `
  })
  export class MyComponent1 {
    constructor(private service:ListService) {
      this.service.list1Event.subscribe(data => {
        this.list = data;
      });
    }
  }
  

• bootstrap

  bootstrap(AppComponent, [ ListService ]);
  

See this question for more details:

• Delegation: EventEmitter or Observable in Angular
• Delegation: EventEmitter or Observable in Angular
• Is possible to have two template for single call service in AngularJS 2

In your use case I would use services. Services are used to communicate its data to other components. One component could update this data to the service, and another component could read from it. Or both components could just read from it, and the server itself gets it's data from the 'outside world'.

You use input to pass along data from the parent to the child and you use output to output events from the child to the parent.

You use ngOnChanges to do something when something changes in the component itself, but I prefer to use get() and set() functions for that.

At least, that is my take on it :)