Transform a row in an ng Smart table to a routerlink using Angular 2

Question

Transform a row in an ng Smart table to a routerlink using Angular 2

I've been exploring ng2 Smart Table and I'm looking to convert a row (or even cell data) into a clickable link using routerlink. The current method I'm employing to retrieve some of my row's data is as follows:

onUserRowSelect(event) 
{ 
    console.log('user row select: ', event);
    this.selected = event.selected;
    console.log('selected list: ', this.selected);
    this.router.navigate(["/dashboard"]);
    console.log("this is a test ");
}

It's worth noting that the event comes from the HTML file, and I utilize this.router.navigate to move to another page. However, I keep encountering an error message stating:

TypeError: this.router is undefined Stack trace: [1215]/SmartTables.prototype.onUserRowSelect@http:

Could somebody please explain 1) what might be causing this issue, and 2) how I can extract the data received from the event? It returns an Object. Thank you!

angular typescript angular2-routing angular2-template

Answer 1

Answer №1

To set up your settings in the column, follow these instructions:

objektelinks: {
title: 'Objektelink',
type: 'custom',
renderComponent: LinkViewComponent,
},

You can create a render component like this:

import { Component, OnInit, Input, Output, EventEmitter } from 
'@angular/core';
import { ViewCell } from 'ng2-smart-table';

@component({
selector: 'ngx-link-view',
template: <a [routerLink]= "['/auth/register']"> Objekte </a>,
})
export class LinkViewComponent implements ViewCell, OnInit {
renderValue: string;

@input() value: string | number;
@input() rowData: any;

@output() save: EventEmitter = new EventEmitter();

ngOnInit() {
// add your code here
}


}

Answer 2

To set up your settings in the column, follow these instructions:

objektelinks: {
title: 'Objektelink',
type: 'custom',
renderComponent: LinkViewComponent,
},

You can create a render component like this:

import { Component, OnInit, Input, Output, EventEmitter } from 
'@angular/core';
import { ViewCell } from 'ng2-smart-table';

@component({
selector: 'ngx-link-view',
template: <a [routerLink]= "['/auth/register']"> Objekte </a>,
})
export class LinkViewComponent implements ViewCell, OnInit {
renderValue: string;

@input() value: string | number;
@input() rowData: any;

@output() save: EventEmitter = new EventEmitter();

ngOnInit() {
// add your code here
}


}

Answer 3

Answer №2

Dealing with a similar issue myself, but I've found a potential solution:

The first problem to address is:
- Make sure you have imported Router from '@angular/core'. If not, add this line: import { Router / ... / } from "@angular/router";
- Ensure you have passed the Router object to the constructor. If not, include it like so: constructor(private router:Router) {/ ... /}
Next up is problem #2:

If you log your Object, you should see it as an expandable list in the browser console. You can then easily access any data you need.

To extract specific data, try something like this:

event.data.someValue;

I hope this information proves helpful in resolving your issue.

Answer 4

Dealing with a similar issue myself, but I've found a potential solution:

The first problem to address is:
- Make sure you have imported Router from '@angular/core'. If not, add this line: import { Router / ... / } from "@angular/router";
- Ensure you have passed the Router object to the constructor. If not, include it like so: constructor(private router:Router) {/ ... /}
Next up is problem #2:

If you log your Object, you should see it as an expandable list in the browser console. You can then easily access any data you need.

To extract specific data, try something like this:

event.data.someValue;

I hope this information proves helpful in resolving your issue.

Transform a row in an ng Smart table to a routerlink using Angular 2

Answer №1

Answer №2

Similar questions

Extract Method Parameter Types in Typescript from a Generic Function

Even after the component is destroyed, the subscription to the service observable continues to emit

How can I generate codegen types using typeDefs?

Retrieve the value of [innerHTML] from a subcomponent

Definition of TypeScript array properties

Trouble with Nextjs link not functioning properly with a URL object when incorporating element id into the pathname

Typescript - optional type when a generic is not given

Tips for ensuring only one property is present in a Typescript interface

Exploring Typescript keyof in Storybook's User Interface customizations

Hide Decimal Places with Angular Pipe

Issue encountered while setting up controls and AbstractControls in form development

Concealed URL - Navigation with Angular 2 Routing

What is the best way to preserve the information from the previous page when returning to it after visiting a new one?

Child Route Handling Based on Conditions (Angular)

Ways to specify a setter for a current object property in JavaScript

What is the importance of having the same data type for the searchElement in the argument for Array.prototype.includes()?

Having trouble with Angular CLI on your Windows 10 system?

When reference variables are utilized before being parsed, what happens?

When incorporating leaflet-routing-machine with Angular 7, Nominatim seems to be inaccessible

Is it possible to conceal dom elements within an ng-template?