How to emit event in router-outlet in Angular2

Question

I have main appComponent with

<div class="appComponent">
<div class="row nav navbar">
    <div class="col-sm-8 text-left nav logo">Manacola</div>
    <button class="col-sm-1  col-sm-offset-1  btn btn-primary openGraph" (click)="openGraph()">Graph</button>
    <button class="col-sm-1   btn btn-primary openGraph" *ngIf="loggedIn" (click)="logout()">Logout</button>
</div>
<router-outlet ></router-outlet>

I would like to emit a data from another login component. the point is that when I press "login" button in loginComponent, I want *ngIf="loggedIn" set 'true', in appComponent. Would be good to have something like this working:

<router-outlet (isLogged) = 'loggedIn = $event' ></router-outlet>   

Answer 1

You can define an @Output event emitter in the component being rendered at router-outlet. define router outlet as follows.

*.html
<router-outlet (activate)="onActivate($event)"></router-outlet>

In your component you can do as so.

onActivate(elementRef) {
    elementRef.<the @Output eventEmitter>.subscribe(event => {
        console.log(event);
    });
}

This way you can send the events to the component which is rendering router-outlet. This works because @Output event emitters are event streams and you can subscribe to those events.