title: Angular-Datatables : Can't bind to 'dtOptions' since it isn't a known property of 'table'
body: <p>For the development of a web app with Angular, I want to use a datables.
  So I installed the different modules needed :</p>
  
  <pre><code>npm install jquery --save
  npm install datatables.net --save
  npm install datatables.net-dt --save
  npm install angular-datatables --save
  npm install @types/jquery --save-dev
  npm install @types/datatables.net --save-dev
  </code></pre>
  
  <p>My code take a list of purchases to a service and simply tries to display it:</p>
  
  <p>purchases-list.component.ts</p>
  
  <pre><code>import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
  import { Subject, Subscription } from 'rxjs';
  import { DataTableDirective } from 'angular-datatables';
  import { Purchase } from '../../models/Purchase.model';
  import { PurchasesService } from '../../services/Purchases.service';
  
  @Component({
    selector: 'app-purchases-list',
    templateUrl: './purchases-list.component.html',
    styleUrls: ['./purchases-list.component.css']
  })
  export class PurchasesListComponent implements OnInit, AfterViewInit, OnDestroy {
  
    private purchases: Purchase[] = [];
    purchasesSubscription: Subscription;
  
    dtOptions: DataTables.Settings = {};
    dtTrigger: Subject&lt;any&gt; = new Subject();
  
    constructor(private purchasesService: PurchasesService) { }
  
    ngOnInit() {
      this.purchasesSubscription = this.purchasesService.purchasesSubject.subscribe(
        (purchases: Purchase[]) =&gt; {
          this.purchases = purchases;
        }
      );
      this.purchasesService.getAll();
    }
  
    ngAfterViewInit() {
      this.dtTrigger.next();
    }
  
    ngOnDestroy() {
      this.purchasesSubscription.unsubscribe();
      this.dtTrigger.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>purchases-list.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table dataTable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;Demandeur&lt;/td&gt;
        &lt;td&gt;Projet&lt;/td&gt;
        &lt;td&gt;Nombre d'articles&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr *ngFor="let purchase of purchases"&gt;
        &lt;td&gt;{{ purchase.loginUser }}&lt;/td&gt;
        &lt;td&gt;{{ purchase.project }}&lt;/td&gt;
        &lt;td&gt;{{ purchase.articles.length }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>At the compilation, everything happens normally, but when I launch my app, the page remains blank and an error appears:
  SCRIPT5022: Template parse errors: Can't bind to 'dtOptions' since it isn't a known property of 'table'.</p>
  
  <p>I have no idea where it can come from... I've already searched on several forums but no solution worked with me !
  So I'm trying here.</p>
  
  <p>To help you, here is the code of my app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { DataTablesModule } from 'angular-datatables';
  import { PurchasesService } from '../services/Purchases.service';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app/app.component';
  import { PurchasesListComponent } from './purchases-list/purchases-list.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      NewPurchaseComponent,
      PurchasesListComponent,
      HomeComponent,
      ErrorComponent,
    ],
    imports: [
      BrowserModule,
      DataTablesModule.forRoot(),
      AppRoutingModule
    ],
    providers: [PurchasesService],
    bootstrap: [AppComponent]
  })
  
  export class AppModule {
  
    constructor() { }
  }
  </code></pre>
  
  <p>And my packages.json</p>
  
  <pre><code>{
    "name": "order",
    "version": "0.0.0",
    "scripts": {},
    "private": true,
    "dependencies": {
      "@angular/animations": "^7.2.15",
      "@angular/cdk": "^8.0.1",
      "@angular/common": "^7.2.15",
      "@angular/compiler": "~7.2.0",
      "@angular/core": "^7.2.15",
      "@angular/platform-browser": "~7.2.0",
      "@angular/platform-browser-dynamic": "~7.2.0",
      "@angular/router": "~7.2.0",
      "angular-datatables": "^8.0.0",
      "core-js": "^2.5.4",
      "datatables.net": "^1.10.19",
      "datatables.net-dt": "^1.10.19",
      "jquery": "^3.4.1",
      "rxjs": "^6.5.2",
      "rxjs-compat": "^6.5.2",
      "tslib": "^1.9.0",
      "zone.js": "~0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.13.0",
      "@angular/cli": "~7.3.9",
      "@angular/compiler-cli": "~7.2.0",
      "@angular/language-service": "~7.2.0",
      "@types/datatables.net": "^1.10.17",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "@types/jquery": "^3.3.29",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.5.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~4.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~3.2.2"
    }
  }
  </code></pre>