Angular2 Fire Click Event On Unknown Html Element

I want to handle a click event of x3dom's shape html element in my parent component. The onclick event is fired by x3dom. I can only delegate it with an ugly hack (see below). Beca

Solution 1:

Working Demo : https://plnkr.co/edit/qQudgi9touIFOe52m4JY?p=preview

<Shape (myClick)="doStuffInParent($event)"></Shape>

in Component code,

doStuffInParent(value){
  console.log(value); //Angular2
}

---

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

@Component({
  selector: 'Shape',
  providers: [],
  directives: [],
  pipes: [],
  template:`<div (click)="click()">Shap Component</div>`
})


exportclassShape { 
    @Output() myClick: EventEmitter<string> = newEventEmitter<string>(); 

    click(){
       this.myClick.next('Angular2');
    }

  }