Trying to add row click event in angular datatables but its not working

I was implementing row-click-event into my datatables. Using tutorial and example from (http://l-lin.github.io/angular-datatables/#/advanced/row-click-event)

I made a mock table by hard coding a table into HTML to run the example. The problem is that the rowCallback function doesn't seem to work at all when I load into the webpage. From what I can tell the basic datatable functionality works, sorting, filtering searching etc. But I cannot get the click even to get bind to each of the records. I have been trying to figure this problem out for couple of days. Can anyone tell what might be wrong with my code?

<div class="col-md-12">
    <p class="homeText">{{homeText}}</p>
</div>
<blockquote>Please click on a row</blockquote>
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
<br />
<table datatable class="row-border hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Foo</td>
        <td>Bar</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Someone</td>
        <td>Youknow</td>
      </tr>
    </tbody>
  </table>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  message = 'placeholder';
  public homeText: string;
  dtOptions: DataTables.Settings = {};

  constructor() { }

  someClickHandler(info: any): void {
    this.message = info.id + ' - ' + info.firstName;
  }

  ngOnInit() {
    this.homeText = "Welcome home";
    this.dtOptions = {
      ajax: 'data/data.json',
      columns: [{
        title: 'ID',
        data: 'id'
      }, {
        title: 'First name',
        data: 'firstName'
      }, {
        title: 'Last name',
        data: 'lastName'
      }],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.someClickHandler(data);
        });
        return row;
      }
    };
  }
}