Angular: how to share data from custom-component with app-component (app-root)

Issue

App-Component-Html: (which is in Index.Html as <app-root></app-root> )

<h2> {{currentOrNextWeek}} week from {{dateMonday}} to {{dateFriday}} </h2>
<div class="container"> <router-outlet></router-outlet> </div>

Custom-Component-TS: Is defined in routes -> router.module.ts and besides many other custom-components it has a table showing information realized by data from a service which sends get-requests to an API. Like this:

this.configService.getData.subscribe(data => organizeData(data))

The data itself has information like "Week = Current", "DateOfMonday=01.01.2021" (everything is a string)

How can I pass the data from custom.component to the app.component? I tried EventEmitter but I use <router-outlet>. As I understand correctly the sequence begins with app-component but the first GetData call is in custom-component, but the title is in the app-component-html

Solution

you cant send this data using RXJS, behaviourSubject?

on some service:

varbSubject$ = new BehaviorSubject(<string>); 

on your app component:

bSubject$ = yourservice.varbSubject$
bSubject$.next("b");

on custom unknow element =>

bSubject$ = yourservice.varbSubject$
bSubject$.subscribe(value => {
  console.log("Subscription got", value); 
}); 

Answered By - Thiago Nascimento