Responsive Datatable не формируется в Angular

Question

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="exemple" class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>PhoneNum</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.firstName }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.phoneNum }}</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        $('#example').DataTable({


            responsive: true


        });
      });
    </script>

Это мой datatable.component.html in Компонент с датируемыми данными .Я много раз пытался сделать отзывчивым DataTable. Но каждый раз, когда формируется статическая таблица данных. Я хочу, чтобы она была доступна с помощью строки поиска, опции следующей страницы и т. Д. Может кто-нибудь сказать решение, пожалуйста. Любые предложения будут оценены.