title: Extending a PrimeNg component inside Angular2
body: <p>Due to some use cases, I need to extend a PrimeNG component in Angular2. For proofing purpouses, I chose using the <code>DataTable</code> since it is complicated enough.</p>
  <p>After literally copy pasting the <code>@Component</code> annotation, I have added:</p>
  <p><code>export class PPDataTable extends DataTable {} </code></p>
  <p>At this point I  get the following error: <code>No provider for DataTable</code>. If I add <code>DataTable</code> to the <code>providers</code> array in the annotation, the content of my <code>DataTable</code> is empty.</p>
  <p>Therefore I tried adding: <code>{ provide: DataTable, useValue: PPDataTable }</code> which yields in some errors such as : <code>TypeError: co.dt.isSorted is not a function</code>. I tried logging <code>this.isSorted</code> in the new class and it does exist.</p>
  <p>How do I extend something like this?</p>
  <p>Also, got any better solutions to change the selector name of a PrimeNg component ( wrap it somehow ) ?</p>
  <p><em><strong>Edit</strong></em></p>
  <p>After looking some more through the debug stack I found this:<a href="https://i.stack.imgur.com/O4zkQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O4zkQ.png" alt="enter image description here" /></a></p>
  <p>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 <code>dt[0].isSorted()</code> it works!</p>
  <p>How do I provide the object directly?</p>
  <p><em><strong>Answer</strong></em></p>
  <p>Seems that if I provide <code>{ provide: DataTable, useExisting: PPDataTable }</code> it works.</p>