CODEWITHSUNDEEP
functionangularcheckbox
John Smith
John Smith

Reputation: 129

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

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.

Upvotes: 1

Views: 1044

Answers (1)

Samuel Neff
Samuel Neff

Reputation: 74899

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).

Upvotes: 1

Related Questions