RouterLink rendering for angular2-datatables

[bryan-mwas]

Hi
Could you please describe how to display with routerLinks instead of href tags dynamically from the angular-datatables. If I use hrefs this reloads the whole page.
Thanks

[l-lin]

I'm sorry, I don't quite understand your question...
Do you want to use routerLink inside the datatables? Is that your question? If so, then currently, I still did not find any solution to do this...

[bryan-mwas]

Yes I wanted to use routerLinks to redirect the user to another page. Thanks

[marnickmenting]

Maybe you can think of a solution using the row click event? https://l-lin.github.io/angular-datatables/#/advanced/row-click-event.

I use this for example:

rowClickHandler(info: any): void {
	this.router.navigate(['./', info.id], {relativeTo: this.route});
}

[MuriloEduardo]

You can't use [] combined with {{}} either the former or the later

[routerLink]="item.routerLink"
Should do what you want.

routerLink="item.routerLink"
would bind item.routerLink.toString() to the routerLink property.

[westwick]

Is it possible to do this with just a single cell rather than the entire row? Can't find any examples of this in the docs

[irman]

@westwick Any updates on how you handle this?

Doing something like this won't work. (It's not angular way anyway)

columns: [
        {
            data: 'id',
            className: 'text-center',
            orderable: false,
            render: (data: any, type: 'filter' | 'display' | 'type' | 'sort' | undefined | any, row: any, meta) => {
                if(type === 'display'){
                    return `
                        <a [routerLink]="[` + row.id + `]" title="View">
                            <i class="fa fa-file-text-o"></i>
                        </a>
                    `;
                }
            }
        }
    ]

The thing rendered fine. Just the rounterLink are not properly registered.

Probably will work with custom directives.

[irman]

Update on this. I've managed to do this by combining the two methods. Had to resort to jquery too. Something like this:

dtOptions: {
    columns: [
        {
            data: 'id',
            className: 'text-center',
            orderable: false,
            render: (data: any, type: any, row: any, meta) => {
                if(type === 'display'){
                    return `
                        <a href="/product/` + row.id + `" class="cursor-pointer actionView" title="View">
                            <i class="fa fa-file-text-o"></i>
                        </a>
                    `;
                }
            }
        }
    ],
    rowCallback: (row: Node, data: any | Object, index: number) => {
        $('.actionView', row).unbind('click');
        $('.actionView', row).bind('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            this.router.navigate(['/product', data.id]);
        });
        return row;
    }
}

[fbatiga]

@toprockdk just use normal href links with target _blank

[jayjieh]

Do something like this and it will work like charm, no need to reload the whole page

render: function (id: number) {
                        return '<div class=\'actions-buttons center\' id=\'' + id + '\'>'
                            + '<i class=\'fa fa-edit pointer\' title=\'Edit\' edit-config-id="' + id + '"></i>&nbsp;&nbsp;&nbsp;&nbsp;'
                            + '<i class=\'fa fa-eye pointer\' title=\'View\' view-config-id="' + id + '"></i>'
                            + '</div>';
                    }

then add an afterInitView

ngAfterViewInit() {
        this.renderer.listenGlobal('document', 'click', (event) => {
            if (event.target.hasAttribute("edit-config-id")) {
                this.router.navigate(["/product/" + event.target.getAttribute("edit-config-id") + "/update"]);
            }
            if (event.target.hasAttribute("view-config-id")) {
                this.router.navigate(["/product/" + event.target.getAttribute("view-config-id") + "/view"]);

            }
        });
    }

[sanndeepg]

In render method you can use ng-reflect-router-link & href as below,

<a ng-reflect-router-link='/application/admin/user-management/user-form'
  href ='#/application/admin/user-management/user-form;id=" + full.userId + "'>

[funlabscloud]

how to bind in server side for render fields?

[amatteo78sitav]

Have you some news on bug ? I have problem that write 'routerLink' and it render 'routerlink', can't use click row becouse need 2 click for edit and delete row.
Thanks