title: Angular - (click) event on a generated table cell
body: <p>I've been trying to add a (click) event on a cell in a dynamically generated table.</p>
  
  <pre><code>HTMLtoAdd:any;
    @Input() roles:string;
    ngOnInit() {
      let alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
      let table = document.createElement('table');
      for (let i=0;i&lt;10;i++){
        let newRow = document.createElement('tr');
        for (let j=0;j&lt;10;j++) {
          let newCell = document.createElement('td');
          let cellId = alphabet[i]+j;
          newCell.setAttribute("id",cellId);
          newCell.setAttribute("(click)","alert(this.id)");
          newRow.appendChild(newCell);
        }
        table.appendChild(newRow);
      }
      this.HTMLtoAdd = table.outerHTML;
    };
  </code></pre>
  
  <p>When I do this, I get this error :</p>
  
  <pre><code>'setAttribute' on 'Element': '(click)' is not a valid attribute name.
  </code></pre>
  
  <p>How could I add this event, provided I need to generate that table ?</p>
  
  <p>Feel free to ask for more details if needed.</p>