club.component.ts

import { Component, EventEmitter } from '@angular/core';

@Component({
    selector: 'single-component',
    outputs: ['putRingOnIt'],
    template: `
        <button (click)="liked()">Like it?</button>
    `
})
export class SingleComponent{
    putRingOnIt: EventEmitter<string>;

    constructor() {
        this.putRingOnIt = new EventEmitter();
    }

    liked() : void {
        this.putRingOnIt.emit("ok ok ok");
    }
}

@Component({
    selector: 'club',
    template: `
        <div>
            <single-component
                (putRingOnIt) = "ringWasPlaced($event)"
            >
            </single-component>
        </div>
    `
})
export class ClubComponent{
    ringWasPlaced(message: string) : void {
        console.log(`Put your hands up: ${message}`);
    }
}