How to pass data from child component to parent component in Angular4

I am working in an Angular4 application.In this I want to pass data from child component to parent component.let me explain the details...

app.component.html

code...

 <div class="col-3">
          <br>
          <form class="form-inline">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">
                    <i class="fas fa-shopping-bag text-primary" style="font-size:40px"></i>
                </span>
              </div>
              <input type="text" class="form-control bg-white"  placeholder="My Cart" value="  My Cart  {{totalcartval}} Item(s)" readonly >  
            
            </div>
          </form>
        </div>

my-cart.component.html

code...

 import { Component,EventEmitter,Output } from '@angular/core';
    import { Router } from '@angular/router';
    import { HttpClient } from '@angular/common/http';
    import { SessionStorageService,SessionStorage } from 'angular-web-storage';
    
    
    @Component({
      selector: 'app-my-cart',
      templateUrl: './my-cart.component.html',
      styleUrls: ['./my-cart.component.css'],
      outputs :['ChildEvent']
    })
    
    export class MyCartComponent  {

    public sendRecord(Totalcartval : number ) {  
          this.http.get('http://freegeoip.net/json/?callback')
                     .subscribe(
                        data => this.saveIP(data['ip'],Totalcartval),
                        error => console.error(error)
                     );
        }
        saveIP(address: string,cartval :number) {
          this.http.get(`http://localhost:57036/api/data/CartCount/?IP_ADDRESS=${address}&ITEM_QTY=${cartval}&TIME=${this.fixedTimezone}`)
                   .subscribe(data => this.res = data['ITEM_QTY']);
      }  
    ngOnInit() {}
    }

When I added some quantity and clicked on the "Add to Cart " button the quantity is passed to the database for storing through the API and got the response in this line (quantity in number)

.subscribe(data => this.res = data['ITEM_QTY']);

Now I want to display the quantity count to the app.component.html from the my-cart.component.html ....when the data is stored in db the response is came back and immediately I need to show the count in parent component without any time break

I have referred some examples in stackoverflow like chile to parent data passing but nothing is worked for me ...

some examples like child to parent data passing ,need to display the child component in parent component but in my case I don't want to display the child in parent ,why because if I have added some product in my cart I could be able to navigate back to my parent component and further add other products in my cart...

Is it possible with Angular..? yes ,means How can I achieve this ...?

Use shared service to share data between components without any relationships. Please read this link for more information. I have done a sample app in stackblitz with shared service using behavior subject from RxJS.

All the components can access and change the same instance of message.

read through this link to know more about BehaviorSubject.

Shared Service

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

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject<string>("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}