Extending a PrimeNg component inside Angular2

Question

Due to some use cases, I need to extend a PrimeNG component in Angular2. For proofing purpouses, I chose using the DataTable since it is complicated enough.

After literally copy pasting the @Component annotation, I have added:

export class PPDataTable extends DataTable {}

At this point I get the following error: No provider for DataTable. If I add DataTable to the providers array in the annotation, the content of my DataTable is empty.

Therefore I tried adding: { provide: DataTable, useValue: PPDataTable } which yields in some errors such as : TypeError: co.dt.isSorted is not a function. I tried logging this.isSorted in the new class and it does exist.

How do I extend something like this?

Also, got any better solutions to change the selector name of a PrimeNg component ( wrap it somehow ) ?

Edit

After looking some more through the debug stack I found this:

It seems that instead of providing directly the object, I am providing an array containing the object and this is (by my guess) the cause of the error. If I go in the sourcecode and change it to dt[0].isSorted() it works!

How do I provide the object directly?

Answer

Seems that if I provide { provide: DataTable, useExisting: PPDataTable } it works.

Answer 1

Try this out my good friend:

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { PrimeNgClassToExtend } from 'path';

const DATATABLE_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyClassThatIsExtending),
    multi: true
};

@Component({
    selector: 'my-class-extending',
    providers: [DATATABLE_VALUE_ACCESSOR],
    template: ``
})
export class MyClassThatIsExtending extends PrimeNgClassToExtend {
}

We use NG_VALUE_ACCESSOR in order to connect your custom control to ngModel with Control Value Accessor.

Check this tutorial also, could help.