Angular with DataTables using

Question

Hello,

I am using admin template with angular. There are datatables in this template, I am trying to use it.

But I can't use datatables features. How is this possible?

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';
import { DataTablesModule } from 'angular-datatables';
import * as $ from 'jquery';
@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.sass']
})
export class UsersComponent implements OnInit {
  constructor(private service:SharedService) { }
  UsersList:any=[];
  dtOptions: DataTables.Settings = {};
  ngOnInit(): void {
    this.dtOptions={
      pagingType: 'full_numbers',
      pageLength:5,
      lengthMenu:[5,15,25],
      processing: true

    };
    this.getUsers();
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
      });
  }
  getUsers()
  {
    this.service.getUser().subscribe(data=>{
      this.UsersList=data;
    });
  }
}

<table id="example2" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
    <thead>
        <tr role="row"><th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column ascending">Rendering engine</th><th class="sorting sorting_desc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" aria-sort="descending">Browser</th><th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Platform(s)</th><th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Engine version</th><th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">CSS grade</th></tr>
    </thead>
    <tbody>
       <tr class="odd">
         <td class="dtr-control">Gecko</td>
         <td class="sorting_1">Seamonkey 1.1</td>
         <td>Win 98+ / OSX.2+</td>
         <td>1.8</td>
         <td>A</td>
       </tr><tr class="even">
         <td class="dtr-control" tabindex="0">Webkit</td>
         <td class="sorting_1">Safari 3.0</td>
         <td>OSX.4+</td>
         <td>522.1</td>
         <td>A</td>
       </tr><tr class="odd">
         <td class="dtr-control" tabindex="0">Webkit</td>
         <td class="sorting_1">Safari 2.0</td>
         <td>OSX.4+</td>
         <td>419.3</td>
         <td>A</td>
       </tr><tr class="even">
         <td class="dtr-control" tabindex="0">Webkit</td>
         <td class="sorting_1">Safari 1.3</td>
         <td>OSX.3</td>
         <td>312.8</td>
         <td>A</td>
       </tr><tr class="odd">
         <td class="dtr-control" tabindex="0">Webkit</td>
         <td class="sorting_1">Safari 1.2</td>
         <td>OSX.3</td>
         <td>125.5</td>
         <td>A</td>
       </tr><tr class="even">
         <td class="dtr-control" tabindex="0">Webkit</td>
         <td class="sorting_1">S60</td>
         <td>S60</td>
         <td>413</td>
         <td>A</td>
       </tr><tr class="odd">
         <td class="dtr-control">Misc</td>
         <td class="sorting_1">PSP browser</td>
         <td>PSP</td>
         <td>-</td>
         <td>C</td>
       </tr><tr class="even">
         <td class="dtr-control">Presto</td>
         <td class="sorting_1">Opera for Wii</td>
         <td>Wii</td>
         <td>-</td>
         <td>A</td>
       </tr><tr class="odd">
         <td class="dtr-control">Presto</td>
         <td class="sorting_1">Opera 9.5</td>
         <td>Win 88+ / OSX.3+</td>
         <td>-</td>
         <td>A</td>
       </tr><tr class="even">
         <td class="dtr-control">Presto</td>
         <td class="sorting_1">Opera 9.2</td>
         <td>Win 88+ / OSX.3+</td>
         <td>-</td>
         <td>A</td>
       </tr>
    </tbody>
    <tfoot>
       <tr><th rowspan="1" colspan="1">Rendering engine</th><th rowspan="1" colspan="1">Browser</th><th rowspan="1" colspan="1">Platform(s)</th><th rowspan="1" colspan="1">Engine version</th><th rowspan="1" colspan="1">CSS grade</th></tr>
    </tfoot>
</table>