Implement (Using) DataTable in Angular 13

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?

I am currently using angular 13 and the datatables css and js codes in the following theme.

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();
    
  }
  getUsers()
  {
    this.service.getUser().subscribe(data=>{
      this.UsersList=data;
    });
  }
}

<div class="content-wrapper" style="min-height: 1299.69px;">  
<section class="content">
<div class="container-fluid">  
    <div class="card" style="margin-top: 100px;">  
        <div class="card-header">  
          <h3 class="card-title">DataTable with minimal features & hover style</h3>  
        </div>  
        <!-- /.card-header -->  
        <div class="card-body">  
            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">    
              <div class="row">            
                <table id="example2"  class="table table-stripped dataTable table-bordered" datatable [dtOptions]="dtOptions">  
            <thead>  
            <tr role="row">  
                <th class="sorting sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"  
                aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending">CustomId</th>  
  
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"   
                aria-label="Browser: activate to sort column ascending">Customer Code</th>  
                  
                <th class="sorting" tabindex="0"   
                aria-controls="example2" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Email</th>  
  
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"   
                aria-label="Engine version: activate to sort column ascending">Customer FirstName</th>  
                  
                <th class="sorting" tabindex="0"   
                aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Status</th>  
  
                <th class="sorting" tabindex="0"   
                aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Customer LastName</th>  
  
                <th class="sorting" tabindex="0"   
                aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Create Date</th>  
  
                <th class="sorting" tabindex="0"   
                aria-controls="example2" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Updated Date</th>                
            </tr>  
            </thead>  
            <tbody>
            <tr *ngFor="let dataItem of UsersList">  
                <td>{{dataItem.id}}</td>  
                <td>{{dataItem.customerCode}}</td>  
                <td>{{dataItem.email}}</td>  
  
                <td>{{dataItem.firstName}}</td>  
                <td>{{dataItem.status}}</td>  
                <td>{{dataItem.lastName}}</td>  
  
                <td>{{dataItem.createDate}}</td>  
                <td>{{dataItem.updateDate}}</td>  
            </tr>
        </tbody>
          </table>
    </div>  
            </div>  
        </div>
      </div>  
</div> 
</section>  
</div>