Angular Datatables not working with button in td

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { User } from 'src/app/Model/user.model';
import { UserService } from 'src/app/Service/user.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users!: User[];
  constructor(private userService: UserService, private router: Router) { }
  dtOptions: DataTables.Settings = {};
  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      lengthMenu: [5, 10, 15],
      processing: true
    };
    this.userService.findAll().subscribe(data => {
      this.users = data;
    });
    // $('#datatable-userlist').DataTable();
  }
  deleteUser(userId: number) {
    this.userService.deleteUser(userId).subscribe(
      data => {
        this.userService.findAll().subscribe(data => {
          this.users = data;
        });
      },
      result => this.gotoUserList());
  }
  gotoUserList() {
    this.router.navigate(['/users']);
  }

  updateUser(user: User) {
    this.router.navigate(['update', user]);
  }
}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h2>User List</h2>
    </div>
    <div class="panel-body">
        <table datatable [dtOptions]="dtOptions" 
        class="table table-striped table-bordered table-sm row-border hover"
         cellSpacing="0" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>ContactNo</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of users">
                    <td>{{user.userId}}</td>
                    <td>{{user.userName}}</td>
                    <td>{{user.contactNo}}</td>
                    <td>
                        <div class="user-update-btn">
                        <button (click)="deleteUser(user.userId)" class="btn btn-danger shiv">Delete</button>
                        <button (click)="updateUser(user)" class="btn btn-success shiv">Update</button>
                    </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>