My components are as shown below:

user-app-component.html

<app-header></app-header>
<app-main-component></app-main-component>

app-main-component.html

<app-child></app-child>

In the app-child component, I receive data from an API, which I would like to be able to access inside the app-header component. Example shown below

app-child.ts

sharedApiData: any;

ngOnInit() {
  apiRequest.subscribe(response => {
    this.sharedApiData = response; // I want to access the 'sharedApiData' inside my app-header component
  })
}

Which is considered to be a "best practice" to achieve the scenario described? Using EventEmitters? Share the data using an Injectable service between the components? Any other way?

Thanks in advance.