How to get datatable row values and route to another function?

Question

If I use arrow functions I am able to route to another component, but I am unable to get datatable values, below is the code:

$('#list-country tbody').on('click', '.fa-edit', function() {
  var tr = $(this).closest("tr");
  var data = $("#list-country").DataTable().row(tr).data();
  console.log(data);
  this.router.navigate(['/apps/edit-country']);
  this.routePage();
});

If I use normal functions I am able to fetch values , but i am unable to route, below is the code:

$('#list-country tbody').on('click', '.fa-edit', () => {

  var tr = $(this).closest("tr");
  var data = $("#list-country").DataTable().row(tr).data();
  console.log(data);
  this.routePage();
});

These functions are inside ngInit() .

Answer 1

This solution might be useful for you:

1. First declare a variable in you global scope(method / class)
2. Initialize it to this in constructor(if u have any)

3. Use self in place of this as shown below

     var self = this; //declare this in constructor or method $('#list-country tbody').on( 'click', '.fa-edit', function () { var tr = $(this).closest("tr"); var data = $("#list-country").DataTable().row(tr).data(); console.log(data); self.router.navigate(['/apps/edit-country']); self.routePage(); }); 

Answer 2

// event use direct "currentTarget"

$('#list-country tbody').on('click', '.fa-edit', event => {
  var tr = $(event.currentTarget).closest('tr')
  var data = $('#list-country')
    .DataTable()
    .row(tr)
    .data()

  this.router.navigate(['/apps/edit-country']);
  this.routePage()
})