Angular 2 output from router-outlet

<router-outlet></router-outlet> can’t be used to emit an event from the child component. One way to communicate between two components is to use a common service.

Create a service

shared-service.ts

import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable()
export class SharedService {
    // Observable string sources
    private emitChangeSource = new Subject<any>();
    // Observable string streams
    changeEmitted$ = this.emitChangeSource.asObservable();
    // Service message commands
    emitChange(change: any) {
        this.emitChangeSource.next(change);
    }
}

Now inject the instance of the above service in the constructor of both the parent and child component.

The child component will be emitting a change every time the onClick() method is called

child.component.ts

import { Component } from "@angular/core";

@Component({
    templateUrl: "child.html",
    styleUrls: ["child.scss"]
})
export class ChildComponent {
    constructor(private _sharedService: SharedService) {}

    onClick() {
        this._sharedService.emitChange("Data from child");
    }
}

The parent component shall receive that change. To do so,capture the subscription inside the parent’s constructor.

parent.component.ts

import { Component } from "@angular/core";

@Component({
    templateUrl: "parent.html",
    styleUrls: ["parent.scss"]
})
export class ParentComponent {
    constructor(private _sharedService: SharedService) {
        _sharedService.changeEmitted$.subscribe(text => {
            console.log(text);
        });
    }
}

Hope this helps 🙂