PrimeNG's data table not firing onRowSelect event

Question

I'm currently testing PrimeNG and trying to use the data table. Everything works fine, except for the events. I'm trying to use Growl to show a message when a row is selected(like the Events demo on the PrimeNG website). I currently have this:

import { Component, OnInit, EventEmitter } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { DataTable, Column, Schedule, Growl, Message } from 'primeng/primeng';
import { NameListService } from '../shared/index';

@Component({
  moduleId: module.id,
  selector: 'dash',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css'],
  directives: [REACTIVE_FORM_DIRECTIVES, DataTable, Column, Schedule]
})
export class DashboardComponent implements OnInit {

  newName:string = '';
  newLanguage:string = '';
  errorMessage:string;
  names:any[] = [];
  selectedName:any;
  events:any[];
  cols:any[];
  msgs:Message[] = [];

  constructor(public nameListService:NameListService) {
  }

  ngOnInit() {
    this.getNames();
    this.cols = [
      {field: 'id', header: 'ID'},
      {field: 'name', header: 'Name'},
      {field: 'language', header: 'Language'}
    ];
}

  onRowSelect(event) {
    this.msgs = [];
    this.msgs.push({severity: 'info', summary: 'Selected', 
    detail:event.data.name + ' - ' + event.data.language});
}

  getNames() {
    this.nameListService.get()
      .subscribe(
        names => this.names = names,
    error =>  this.errorMessage = <any>error
);
  }

  addName():boolean {
    this.names.push({"name": this.newName, 
    "language": this.newLanguage});
    this.newName = '';
    this.newLanguage = '';
    return false;
  }

}

The dashboard component template looks like this:

<p-growl [value]="msgs"></p-growl>

<form (submit)="addName()" style="margin-bottom:10px;">
  <label>Name:</label>
  <input class="form-control" [(ngModel)]="newName" name="newName" 
     placeholder="Enter new name..."
     style="margin-bottom: 10px;">
  <label>Language:</label>
  <input class="form-control" [(ngModel)]="newLanguage" 
     name="newLanguage" placeholder="Enter new language..."
     style="margin-bottom: 10px;">
  <button class="btn btn-primary" type="submit" 
         *ngIf="newName && newLanguage"><i class="fa fa-plus"></i> Add</button>
</form>

<p-dataTable [value]="names" [(selection)]="selectedName" 
    selectionMode="single">
    <p-column *ngFor="let col of cols" [field]="col.field" 
               [header]="col.header">
    </p-column>
</p-dataTable>

<div *ngIf="selectedName">
  <label>Selected person name:</label><br/>
  <input class="form-control" [(ngModel)]="selectedName? selectedName.name: none" 
     readonly style="margin-bottom: 10px;"/><br/>
  <label>Selected person programming language:</label><br/>
  <input class="form-control" 
     [(ngModel)]="selectedName? selectedName.language: none" 
     readonly style="margin-bottom: 10px;"/><br/>
  <label>Selected person birth year:</label><br/>
  <input class="form-control" 
     [(ngModel)]="selectedName? selectedName.birthYear: none" readonly/>
</div>

However, when I select a row the event doesn't fire. It doesn't stop at a breakpoint, so it doesn't register it at all. Is there a solution or some advice as to where I should look to fix this?

Answer 1

Looks like you forgot to specify selectionMode:

<p-dataTable [value]="names" selectionMode="single" (onRowSelect)="onRowSelect($event)">
  ...    
</p-dataTable>

valid values are "single" and "multiple"

Plunker example

Update:

Also you have to subscribe on onRowSelect event

(onRowSelect)="onRowSelect($event)"

where

• (onRowSelect) - name of event from DataTable component
• onRowSelect($event) - name of method within your component