While working inside the "downMouseBtn(event)" Event Handler, I decided to create a new element with the code
<div id ="rectangle"></ div>Now, my next step is to establish an eventListener for this newly created item.
Could someone guide me on how to achieve this? Which part of the existing code should I modify and what specific lines need to be added?
The main goal here is to handle the mouseClick event for an item that has been generated dynamically.
import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';
@Component({ selector: 'app-editor', templateUrl:'./editor.component.html', styleUrls: ['./editor.component.css']})
export class EditorComponent implements OnInit {
constructor(private renderer: Renderer2, private elRef: ElementRef) { }
ngOnInit() { }
downMouseBtn(event) {
this.rectangle = document.createElement('div'); /*dynamically create element*/
this.rectangle.setAttribute("id", "rectangle"); /*set id for element*/
this.renderer.appendChild(this.editorPhotoWrapper.nativeElement, this.rectangle); /*add element via renderer*/
/* problemAreaStart */
this.renderer.listen(this.rectangle.nativeElement, 'click', (event) => {
console.log("test");
});
/* problemAreaStop */
}
}