An angular child-to-parent communication using service.

child.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `
})
export class SiblingComponent implements OnInit {
  message:string;

  constructor(private service: DataService) { }

  ngOnInit() {
    this.data.msg.subscribe(m => this.message = m);
  }

  newMessage() {
    this.service.setMessage("Hello from child");
  }
}

data.service.ts

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

@Injectable()
export class DataService {
  private msg = new BehaviorSubject('Init');

  constructor() { }

  setMessage(newContent: string) {
    this.msg.next(newContent);
  }
}

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "./data.service";

@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `
})
export class ParentComponent implements OnInit {
  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.msg.subscribe(m => this.message = m);
  }
}