Subscribing to event outside router-outlet

I have this simple app.component.html:

<app-header></app-header>

<main>
<router-outlet></router-outlet>
</main>

<app-footer *ngIf="currentUser"></app-footer>


I want app-footer to subscribe to events fired from components triggered by routing i.e. "inside" the router-outlet tag.

For some reason I just cant get this to work.

In my translation.service.ts I have these two lines:

private languageChanged$: Subject<string> = new Subject<string>();
public languageChanged: Observable<string> = this.languageChanged$.asObservable();


and in app-footer:

this.translationService.languageChanged.subscribe(() => {
console.log('Language Changed');
[my code here]
});


How can I trigger the code in app-footer? I know for sure that a language is nexted into languageChanged$.

Continue reading...