Creating a clickable div dynamically with Angular 6

Question

I want the display the user an image, with a varying number of divs (depending on the number of faces detected) which should be clickable (a click on a face will show some attributes for that particular face).

So ideally I would like to create some divs (or buttons) around each face and have something like (click)="divClicked()" for each element. However,(click) isn't a legit attribute, so, for example, trying something like

d3.select('button').attr('(click)','onClickMe()');

gives an error. onclick is a legit attribute, but by using it I think I should break the way Angular wants me to work (as putting the function inside the component's ts file gives the error onClickMe is not defined).

The very best workaround I could come up with is to assign an id to each div and then do something like

document.getElementById('b1').onclick=this.onClickMe;

but that feels like bad coding.

So, what's the clean way to do that?

Answer 1

I think you should create the div elements by adding a loop with ngFor to your template to display your divs. Of course they may be CSS-styled, based on some properties you have determined beforehand (in particular the CSS properties left and top are useful here). Of course you can add a (click)-event to those divs too.

To do this, your component should hold a list of objects to display which you may update when necessary. Furthermore it should offer a method which gets called when the user wants to see details of a particular face. The template then only cares for turning those objects into a HTML structure and bind the callbacks.

Structurally something similar to the following will occur in your template:

<div
    *ngFor="let face of faces; index as i"
    (click)="showFaceDetails(i)"
    [style.left.px]="face.x"
    [style.top.px]="face.y"
></div>