title: How to apply angular DataTable?
body: <p>I am working on Angular 6 and i want to apply angular data table but its giving below error. How can I resolve below error and apply Angular data table.</p>
  
  <p>getting bellow error.</p>
  
  <pre><code>ERROR TypeError: $(...).DataTable is not a function
      at eval (angular-datatables.umd.js:46)
      at ZoneDelegate.invokeTask (zone.js:421)
      at Object.onInvokeTask (ng_zone.ts:264)
      at ZoneDelegate.invokeTask (zone.js:420)
      at Zone.runTask (zone.js:188)
      at ZoneTask.invokeTask (zone.js:496)
      at ZoneTask.invoke (zone.js:485)
      at timer (zone.js:2054)
  </code></pre>
  
  <p>I have follow this <a href="https://l-lin.github.io/angular-datatables/#/getting-started" rel="nofollow noreferrer">https://l-lin.github.io/angular-datatables/#/getting-started</a> URL for datatable.</p>
  
  <p>I have installed all the below dependencies in my project.</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>I have added below files in my _Layout file in HEAD tag.</p>
  
  <pre><code>&lt;link href="~/node_modules/datatables.net-dt/css/jquery.dataTables.css" rel="stylesheet" /&gt;
  &lt;script src="node_modules/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/datatables.net/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>After that I have added below lines in Systemjs.Config.js file</p>
  
  <pre><code>'jquery': 'npm:jquery/dist/jquery.js',
  'datatables.net': 'npm:Datatables.net/js/jquery.dataTables.js',
  'angular-datatables': 'npm:angular-datatables/bundles/angular-datatables.umd.js',
  </code></pre>
  
  <p>Import datatable in app.module.ts</p>
  
  <pre><code>import { DataTablesModule } from 'angular-datatables';
  @NgModule({
      imports: [BrowserModule, HttpClientModule, DataTablesModule],
      providers: []  //declared employee component also as a root component
  })
  </code></pre>
  
  <p>At last below is my html file</p>
  
  <pre><code>&lt;h1&gt; This is our TL Dashboard&lt;/h1&gt;
  &lt;table border="1" datatable class="table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;BASIC&lt;/td&gt;
              &lt;td&gt;DEPARTMENT NAME&lt;/td&gt;
              &lt;td&gt;DESIGNATION DESC&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let employee of EmployeeDetails.Table1"&gt;
              &lt;td&gt;{{employee.EMP_NAME}}&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>