0

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

Dgotin
  • 38
  • 8

3 Answers3

1

Your question seems to be how to exchange property between two component that are dynamic and does not need to be parent child. In that case communication through Service seems to be the best way to go.

You can create a service called AppCommunication with property tittle = new subject() that can have observable which is subscribed at app component and can be injected to you custom component so you can trigger the value from 'next'.

This can be used where ever you want to set it from.

vaira
  • 2,191
  • 1
  • 10
  • 15
  • hey! yeah I had the same idea but on the very first load of the page the title is "week from to". Maybe I am missing something cuz I think the property is called first in app-component but it is first set after custom-component finished. – Dgotin Nov 18 '21 at 18:42
  • Yes because the title would only be set when the api of the custom component is complete and triggers the event to update it. – vaira Nov 18 '21 at 18:46
1

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); 
});
Thiago Nascimento
  • 152
  • 1
  • 9
  • 1
    And vice versa? Is it possible? Cuz the App-Component is the first component to be load and the first request is accomplished in custom-component and I need the info from this request for my App-Component – Dgotin Nov 20 '21 at 10:13
  • 1
    thanks! Your answer solved my problem! Unfortunately, I can not give you a upvote yet, but I'll give you one afterwards :) – Dgotin Nov 22 '21 at 12:46
  • 1
    Upvoted your answer as I have the permission now :D thx again! – Dgotin Jul 12 '22 at 12:03
0

Have a look at @ThiagoNascimento post right underneath, it solved my problem!
Link: https://stackoverflow.com/a/70028739/17449921

Dgotin
  • 38
  • 8