0

i have a datatable showing a list of users, i want to be able to click on.

problems i can't use routerLinks inside this datatable but dont want the whole site reloading with a normal HREF.

So depending on what customer i'm clicking i want to be able to send the user to that customer.

This is working for customer 1 but how will i make this dynamic and able to get the ID of the link.

this.datatable = (<any>$('#m_datatablegg')).mDatatable(options);   

let _self = this;
this.datatable.on('m-datatable--on-layout-updated', function(e) {
    $(_self.elRef.nativeElement).find('.btn.whatsiteilike ').click(function(e){
        e.preventDefault();
        _self.router.navigate(['livedata/customers/1']);
    });
});

This is where i'm creating the actual button/link

<a href="livedata/customers/'+t.id+'" 
class="m-portlet__nav-link btn whatsiteilike m-btn m-btn--hover-accent m btn--icon m-btn--icon-only m-btn--
pill" title="Edit details">
<i class="la la-edit"></i>
</a>

This is the reason i got from those making the datatable

Datatable element is rendered after Angular has finished compiling, render in the browser.

Angular processes the template when the component is compiled. HTML added later via ajax or append is not compiled anymore and RouterLinks bindings are ignored.

You need to add RouterLink programmatically in the component.

Sonny Hansen
  • 620
  • 1
  • 5
  • 18
  • `problems i can't use routerLinks inside this datatable` <= Why not? If you prefer to not handle it in the HTML you could use the `(click)` event and call a method on the component with the identifier or record and the component could make the call to the Router to navigate the user to the customer view. Trying to do 1/2 in javascript and 1/2 in angular is a recipe for bad code and bugs though. – Igor Oct 25 '17 at 09:40
  • Reason is added: comming from those making the datatable i'm using. – Sonny Hansen Oct 25 '17 at 09:43
  • See the "Possible duplicate of" link above. You want to do the routing from your component using the `Router` and do that using an exposed method that you could call to from "outside" of the angular framework which means you have to expose it. Call it from a javascript click handler in your .js code. – Igor Oct 25 '17 at 09:48
  • Will check it out, thanks for the link. – Sonny Hansen Oct 25 '17 at 09:55
  • Having a hard time understand this, there must be some way to grap the ID of my a or some other way around :/ This thing is way to complicated to be true – Sonny Hansen Oct 25 '17 at 10:50

0 Answers0