Angular2 fire click event on unknown html element

Question

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). Because shape is not a known Html tag by Angular 2 I have to define a shape component? or Not?

In Parent Component:

<shape (click)="doStuffInParent()" ></shape> <!-- click is not fired by x3dom -->

Shape component so far:

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

@Component({
  selector: 'Shape',
  providers: [],
  directives: [],
  pipes: []
})
export class Shape {
    @Output() notify: EventEmitter<string> = new EventEmitter<string>(); // wrong!

  constructor() {}

}

Edit: Maybe I don't need the component? The onclick event is fired by X3dom and not by me.

another solution for me would be if I can just call my component method from a regular onclick event what I asked here .

Update I hacked a solution what solved at least my problem:

call Angular 2 component method from html event

Answer 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>`
})


export class Shape { 
    @Output() myClick: EventEmitter<string> = new EventEmitter<string>(); 

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

  }