title: Creating a clickable div dynamically with Angular 6
body: <p>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).</p>
  
  <p>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</p>
  
  <pre><code>d3.select('button').attr('(click)','onClickMe()');
  </code></pre>
  
  <p>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).</p>
  
  <p>The very best workaround I could come up with is to assign an id to each div and then do something like</p>
  
  <pre><code>document.getElementById('b1').onclick=this.onClickMe;
  </code></pre>
  
  <p>but that feels like bad coding.</p>
  
  <p>So, what's the clean way to do that?</p>