Angular 2 event binding

Question

I want to associate an event with this "tmp", but it is also associated with a previous existing button, why?

constructor(private renderer :Renderer ,private element : ElementRef){
        }
    private appender(){
        var tmp  = this.renderer.createElement(this.element.nativeElement,'button');
        this.renderer.listen(tmp, 'click', ( event:Event ) => console.log(event));
    }

Answer 1

This can be achieved using Renderer2, as shown below,

Including Renderer2 Service in a Component

constructor(private renderer: Renderer2){}

Register an event listener using the method listen

this.renderer.listen('body', 'click',this.calback)

The callback function will be executed when an event is triggered.

calback(event){
  console.log(event)
}

Note. Defining a method for listening, see the documentation for more information.

listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any)

Live demo