ng2-smart-table - How to Open Record in a Different View

Question

I was able to add a custom action to the table but I still don't know how to use that custom action to open a record in a different page/modal when it's clicked. How to assign the ID to that record row? How to pass it to a different view?

in the component.html

<ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomAction($event)"></ng2-smart-table>

in the component.ts

settings = {
mode: 'external',
hideSubHeader: true,    
actions: {
  position: 'right',
  add: false,
  edit:false,
  delete: false,
  custom: [
    { name: 'viewRecord', title: '<i class="far fa-file-alt"></i>'},
  ],
},
columns: {
  firstName: {
    title: 'First Name',
    type: 'string',
  },
  lastName: {
    title: 'Last Name',
    type: 'string',
  },
  username: {
    title: 'Username',
    type: 'string',
  },
  email: {
    title: 'E-mail',
    type: 'string',
  },
  age: {
    title: 'Age',
    type: 'number',
  },
},

};

onCustomAction(event): void {
   
//WHAT TO DO HERE?
   
  }

Answer 1

your can inject NbdialogService in constuctor to open in dialog/Modal

private dialogService: NbDialogService
  onCustomAction(event) {
   switch (event.action) {
     case 'view-details':
        this.service.getDetails(event.data.Id)
         .pipe(
           tap(res => {
           this.dialogService.open(UserDetailsComponent, { // inject your component will be displayed in modal
            context: {
              details: res,
            },
          });
        })
      ).subscribe();
    break;
  default:
    console.log('Not Implemented Action');
    break;
}

or navigate sure as you did by this.router.navigate(url)

Answer 2

SOLVED

    onCustomAction(event): void {

        //get action name to switch in case of different actions.
        var actionName = event.action; 

        //get row id.
        var id = event.data.id; 

        //navigate to edit/view url.
        this.router.navigate(url) 
    }