How to create Angular-DataTable in typescript application

Question

Hi Guys i am working on typescript, angular application.

For creating datatable i have used Angular-DataTable .

From there i have created one sample application. I have created one Controller In which i have added below code.

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected dtOptionsBuilder: any, protected dTColumnDefBuilder:any) {

    var self = this;

    this.dtOptions = dtOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        dTColumnDefBuilder.newColumnDef(0),
        dTColumnDefBuilder.newColumnDef(1),
        dTColumnDefBuilder.newColumnDef(2),
        dTColumnDefBuilder.newColumnDef(3),
        dTColumnDefBuilder.newColumnDef(4),
        dTColumnDefBuilder.newColumnDef(5).notSortable()
    ];

I have added 'datatables' in module dependencies. After running this application. i am getting below error.

angular.js:13424TypeError: Cannot read property 'newOptions' of undefined
at new Controller (app.controller.js:17)
at Object.invoke (angular.js:4625)
at S.instance (angular.js:10027)
at n (angular.js:8965)
at angular.js:9362
at angular.js:15757
at m.$eval (angular.js:17025)
at m.$digest (angular.js:16841)
at m.$delegate.__proto__.$digest (<anonymous>:844:31)
at m.$apply (angular.js:17133)

Could you please tell me, which is the way to implement angular-dataTable in type script. How can i add DtoptionBuilder and DtColumnDefBuilder to my project.

score 0 · Answer 1 · answered Nov 10 '16 at 07:06

You need to inject these two DTOptionsBuilder and DTColumnBuilder

Modified code

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected DTOptionsBuilder: any, protected DTColumnBuilder:any) {

    var self = this;

    this.dtOptions = this.DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        this.DTColumnBuilder.newColumnDef(0),
        this.DTColumnBuilder.newColumnDef(1),
        this.DTColumnBuilder.newColumnDef(2),
        this.DTColumnBuilder.newColumnDef(3),
        this.DTColumnBuilder.newColumnDef(4),
        this.DTColumnBuilder.newColumnDef(5).notSortable()
    ];
}

How to create Angular-DataTable in typescript application

1 Answers1