title: Angular 6 Datatables Add click event for button
body: <p>So, I cannot seem to find an answer anywhere about this.</p>
  
  <p>I was trying to use <a href="https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way" rel="nofollow noreferrer"><strong>this</strong></a> the "Server way" which works great, until you find out the limitations. Like the "select" plugin does not work, or you cant use "expanding" tables</p>
  
  <p>So, I need to go back to using Datatable natively. </p>
  
  <p>Let's say I define my table like this</p>
  
  <pre><code>this.dtOptions = {
    ajax: (dataTablesParameters: any, callback: any) =&gt; {
      this.myService.myEndPoint(dataTablesParameters).
      subscribe((resp: any) =&gt; {
        this.attributes = resp.aaData;
  
        callback({
          recordsTotal: resp.iTotalRecords,
          recordsFiltered: resp.iTotalDisplayRecords,
          data: resp.aaData
        });
      });
    },
    select: true,
    order: [2, "asc"],
    columns: [{
        data: null,
        defaultContent: 'details',
        orderable: false,
        class: 'details-control'
      },
      {
        data: null,
        orderable: false,
      },
      {
        data: "skuPartNumber",
        orderable: true,
      },
      {
        data: "activeUnits",
        orderable: true
      },
      //{ data: "consumedUnits", orderable: true }
      {
        title: "Display Name",
        data: null,
        orderable: true,
        render: (data, type, full) =&gt; `&lt;button (click)="testClick(data.id)"&gt;sdfsdf&lt;/button&gt;`
      }
    ]
  };
  </code></pre>
  
  <p>How can I listen for the button event? My assumption is the page is rendered (compiled) before the AJAX and data table completes? </p>
  
  <p>I was able to do this in knockoutJS and durandal, but cannot figure this out in Angular</p>