how to navigate a page on click a button or anchor tag in angular 4 with jquery datatable

Question

I am displaying a list of users with jquery datatable while data come from server-side in angular 4 and each records have a button/link to navigate another page

jquery code is below in my file component.ts

ngAfterViewInit(): void {

      var table =$('#example-table').DataTable({
        pageLength: 10,
        processing: true,
        serverSide: true,
        fixedHeader: true,
        responsive: true,
        aaSorting: [[ 0, "asc" ]],
        dom: '<"html5buttons"B>lTfgitp',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'print',
            'colvis'
        ],
        "ajax": {
            url:environment.basic_api_url+'user/listdt',
            headers: { 'Usertoken': tokenKey }

        },
        "columns": [
            { "data":"row_id","serachable":false},
            { "data": "name" },
            { "data": "email","orderable":false },
            { "data": "mobile","orderable":false },
            { "data": "created_at"},
            { "data": "user_id","render": function(data, type, row, meta){

              if(type === 'display'){
                  data = '<a routerLink="/user/'+data+'">View</a>';
              }

              return data;
           } }
        ],
        language: {
          buttons: {
            colvis: '<i class="ti-view-grid"></i>'
          }
        }
      });

in above code there is a line like as

<a routerLink="/user/'+data+'">View</a>

now above code is well listing as i want but when i click on view button then there is no action and if i add replace routerlink with href then page is navigate(re-compile the code so whole page is relode ie not navigate as it should like in angular) but it take to much time so please help how to navigate this with angular4

Answer 1

I believe you're missing the binding chars []

You should have

<a [routerLink]="/user/'+data+'">View</a>

Because you're passing a dynamic bindable variable.

Without the brackets the router link would be expecting a static string value. It won't evaluate the expression