Angular DataTables Buttons not clickable

Question

I have a problem, the buttons after rendering in the table row are not clickable in any way.

I made the table like this: component.html

<table datatable [dtOptions]="dtOptions" class="table table-bordered table-hover">

component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './../../../services/post.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent{
  ...
  dtOptions: DataTables.Settings = {};

  constructor(
    ...
  ) { }

  ngOnInit(): void {
    this.dtOptions = {
      ajax: (dataTablesParameters: any, callback) => {
        ......
      },
      columns: [{
        title: 'ID',
        data: 'id'
      }, {
        title: 'First name',
        data: 'firstName'
      }, {
        title: 'Last name',
        data: 'lastName'
      }, {
        title: 'Email',
        data: 'email'
      }, {
        orderable: false,
        data: null,
        className: 'text-right',
        width: '90px',
        render: function (data: any, type: any, row: any, meta: any) {
          return `
            <a class="btn btn-default edit" [routerLink]="['/users', ${row.id}]" data-index=""><i class="far fa-edit"></i></a>
            <button class="btn btn-danger deleteBtn" (click)="removeUser()" data-index="${row.id}"><i class="fa fa-trash"></i></button>
          `;
        }
      }]
    };
  }

  removeUser(){
    alert('ok');
  }

}

The buttons look like this enter image description here

I have the routing set correctly, the application does not go to the address and does not detect the button click. What can be improved?