Unable to load angular2-datatable in my app

[kvbhaskar7]

Hi,
I am new to angular and just setup my new angular2 application. I just setup angular2-datatable to my component and doesn't seems to be working. Not sure whats wrong here. Any help is really appreciated as i m really stuck and not able to proceed further.

When i load the page, its throwing error at table<> tag (See below). I was not able to load the table itself. i checked similar issue posts and most of them were able to load the page, but failing in tests.

Am i missing anything here?

**My simple table :

 <table class="table table-hover table-striped" *ngIf="pay && pay.length"
                                   [mfData]="pay" #mf="mfDataTable">
                                <thead>
                                    <tr>
                                        <th>
                                            <mfDefaultSorter by="id">Id</mfDefaultSorter>                                            
                                        </th>                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let revision of mf.data">
                                        <td>                                           
                                            {{revision.Id}}                                            
                                        </td>                                        
                                    </tr>
                                </tbody>                               
                            </table>**

My systemjs.config.js
// other libraries 'angular2-datatable': 'npm:angular2-datatable', 'lodash': 'npm:lodash/lodash.js'

package.json
"angular2-datatable": "^0.6.0", "lodash": "^4.17.2",

app.module.ts (Just showing datatable module here)
`
import { DataTableModule } from "angular2-datatable";

@NgModule({
imports: [
DataTableModule, `

tsconfig.json
"paths": { "angular2-datatable": [ "../../.." ], "angular2-datatable/*": [ "../../../*" ]

Error
Unhandled Promise rejection: Template parse errors:
*There is no directive with "exportAs" set to "mfDataTable" ("triped" ngIf="payments && payments.length"
[mfData]="payments" [ERROR ->]#mf="mfDataTable">

"): PaymentListComponent@13:55
Can't bind to 'mfData' since it isn't a known property of 'table'. (" table-hover table-striped" *ngIf="payments && payments.length"
[ERROR ->][mfData]="payments" #mf="mfDataTable">

"): PaymentListComponent@13:35
'mfDefaultSorter' is not a known element:
If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module.
If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]Id
"): PaymentListComponent@17:44 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:
There is no directive with "exportAs" set to "mfDataTable" ("triped" *ngIf="payments && payments.length"
[mfData]="payments" [ERROR ->]#mf="mfDataTable">

"): PaymentListComponent@13:55
Can't bind to 'mfData' since it isn't a known property of 'table'. (" table-hover table-striped" *ngIf="payments && payments.length"
[ERROR ->][mfData]="payments" #mf="mfDataTable">

"): PaymentListComponent@13:35
'mfDefaultSorter' is not a known element:
If 'mfDefaultSorter' is an Angular component, then verify that it is part of this module.
If 'mfDefaultSorter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

[ERROR ->]Id
"): PaymentListComponent@17:44

[dwasyluk]

@kvbhaskar7 how did you resolve this?

[kvbhaskar7]

Hi dwasyluk, What issue are you facing? Can you share your snippet code or error?