How to input checkbox when used ng-table in Angular 2?

Question

To create a table using ng-table in Angular 2 is simple however now I want to input checkbox column in the front of the table so that whenever a particular row is selected, its data would be selected too.

Table.html contains

<ng-table [config]="config"
     (tableChanged)="onChangeTable(config)"
     (cellClicked)="onCellClick($event)"
      [rows]="rows" [columns]="columns">           
</ng-table>

Table.ts contains

@Component({
  moduleId: module.id,
  selector: 'table',
  templateUrl: 'table.component.html',
  styleUrls: ['table.component.css']
})

export class TableComponent implements OnInit {
 public rows:Array<any> = [];
 public columns:Array<any> = [
 {title: 'Fruits', name: 'Description', filtering: {filterString:     '', placeholder: 'Filter by description'}},
{title: 'Colour', name: 'Colour', sort: '', filtering: {filterString: '', placeholder: 'Filter by colour'}},
 {title: 'Size', name: 'Size'}
];

public config:any = {
 paging: true,
 sorting: {columns: this.columns},
 filtering: {filterString: ''},
 className: ['table-striped', 'table-bordered']
};

I am confused on how to implement checkbox function in this table. It would be grateful if you could share some knowledge regards to Angular 2.

Did you figure out how to achieve this?

Sushil Gupta
– Sushil Gupta

2018-04-25 18:47:29 +00:00
Commented Apr 25, 2018 at 18:47 — Sushil Gupta
– Sushil Gupta, Commented Apr 25, 2018 at 18:47

Samuel Neff · Accepted Answer · 2017-03-14 01:11:29Z

1

ng-table supports html as the cell contents. Put the html for the input checkbox in the row data for a checkbox column.

It does not support Angular components or directives though--just pure HTML. You can still create a checkbox that broadcasts an event you can listen to with pure HTML/JavaScript.

It's not documented but you can see this in the source:

https://github.com/valor-software/ng2-table/blob/development/components/table/ng-table.component.ts

Note that sanitize in this case really is the opposite of sanitize--it marks the HTML as safe regardless of what is inside. This is good for what you want (although likely unsafe in other situations).

answered Mar 14, 2017 at 1:11

Samuel Neff

75.3k18 gold badges144 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sushil Gupta Over a year ago

Hi Samuel...the link you have provided doesn't have any information about how to add checkbox. Do you have any other information on the same question asked here? I am facing the same issue.

Samuel Neff Over a year ago

@SushilGupta the point of the post and link is that you can put html into the cell, which can contain any content you want such as an input with an onclick handler that you can use to wire up to some javascript that broadcasts an event. Not an Angular-wired checkbox but pure html one.

Collectives™ on Stack Overflow

How to input checkbox when used ng-table in Angular 2?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related