title: Use jquery datatable in angular6
body: <p>I am new to angular and i want to implement jquery datatable in my project.When i implement in a demo project it working perfectly but when i implement on my working project it shows an error,below is my codes</p>
  
  <p>my angular.json file</p>
  
  <p>here i add </p>
  
  <pre><code>  "styles": [ 
            "node_modules/datatables.net-dt/css/jquery.dataTables.css",             
            "src/styles.css"              
          ],
          "scripts": [
            "node_modules/jquery/dist/jquery.js",
         "node_modules/datatables.net/js/jquery.dataTables.js"              
          ],  
  </code></pre>
  
  <p>i create a module as admin under this module i create a component as manage-blogs and in tis component i bind dynamic data in table.</p>
  
  <p>my index.html file</p>
  
  <pre><code>  &lt;!doctype html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="utf-8"&gt; 
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;Admin Panel&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;!-- Tell the browser to be responsive to screen width --&gt;
    &lt;meta content="width=device-width, initial-scale=1, maximum-scale=1, 
    user-scalable=no" name="viewport"&gt;
    &lt;!-- Bootstrap 3.3.6 --&gt;
    &lt;link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body class="hold-transition skin-blue sidebar-mini"&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
    &lt;!-- jQuery 2.2.3 --&gt;
   &lt;script src="assets/plugins/jQuery/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
   &lt;!-- jQuery UI 1.11.4 --&gt;
   &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
   &lt;!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --&gt;
  
   &lt;!-- Bootstrap 3.3.6 --&gt;
   &lt;script src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>my manage-blogs-component.ts file</p>
  
  <pre><code>import { Component,ViewChild, OnInit } from '@angular/core';
  import { BlogService } from '../../services/blog.service';
  import { Blog } from '../../models/blog';
  declare var $;
  
  @Component({
   selector: 'app-manage-blogs',
   templateUrl: './manage-blogs.component.html',
   styleUrls: ['./manage-blogs.component.css']
  })
  export class ManageBlogsComponent implements OnInit {
  
  
  title = 'Manage Blogs';
  blogs: Blog;
  error: string;
  
  @ViewChild('dataTable') table;
  dataTable: any;
  
  constructor(private blogService: BlogService) { }
  
  ngOnInit():void { 
  this.dataTable = $(this.table.nativeElement);
  this.dataTable.DataTable();
  
  this.blogService.getBlogs().subscribe(
    (data: Blog) =&gt; this.blogs = data,
    error =&gt; this.error = error
  );
  
  }
  }
  </code></pre>
  
  <p>my manage-blog-component.html file</p>
  
  <pre><code>    &lt;div class="box-body"&gt;
            &lt;table #dataTable class="table table-bordered table-striped"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;#ID&lt;/th&gt;
                  &lt;th&gt;Image&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Created At&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="let blog of blogs"&gt;
                      &lt;td&gt;{{blog.id}}&lt;/td&gt;
                      &lt;td&gt;&lt;img src="{{blog.image}}" &gt;&lt;/td&gt;
                      &lt;td&gt;{{blog.title}}&lt;/td&gt;
                      &lt;td&gt;{{blog.created_at | date: 'mediumDate'}}&lt;/td&gt;
                      &lt;td class="action"&gt;
                          &lt;a href="#" class="btn btn-info btn-sm"&gt;Edit&lt;/a&gt;
                          &lt;a href="#" class="btn btn-danger btn- 
                      sm"&gt;Delete&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  
            &lt;/table&gt;
            {{error}}
          &lt;/div&gt;
  </code></pre>
  
  <p>when i load the page it shows an error 
  ERROR TypeError: this.dataTable.DataTable is not a function
  But in another demo project i put avove code on app.component file it working.</p>