How to add JS Inside Angular HTML

Question

I am having an issue injecting a table custom javascript inside angular component html file.

The custom JavaScript appends some buttons to the top of the html table.

Here is what I am looking to do in angular:

Table:

<div class="row">
  <div class="col-sm-12">
    <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
           aria-describedby="example1_info">
      <thead>
      <tr role="row">
        <th class="sorting sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
            aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">Rendering engine
        </th>
        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
            aria-label="Browser: activate to sort column ascending">Browser
        </th>
        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
            aria-label="Platform(s): activate to sort column ascending">Platform(s)
        </th>
        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
            aria-label="Engine version: activate to sort column ascending">Engine version
        </th>
        <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
            aria-label="CSS grade: activate to sort column ascending">CSS grade
        </th>
      </tr>
      </thead>
      <tbody>


      <tr class="odd">
        <td class="sorting_1 dtr-control">Gecko</td>
        <td>Netscape 7.2</td>
        <td>Win 95+ / Mac OS 8.6-9.2</td>
        <td>1.7</td>
        <td>A</td>
      </tr>
      <tr class="even">
        <td class="sorting_1 dtr-control">Gecko</td>
        <td>Netscape Browser 8</td>
        <td>Win 98SE+</td>
        <td>1.7</td>
        <td>A</td>
      </tr>
      <tr class="odd">
        <td class="sorting_1 dtr-control">Gecko</td>
        <td>Netscape Navigator 9</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>
      <tr class="even">
        <td class="sorting_1 dtr-control">Gecko</td>
        <td>Mozilla 1.0</td>
        <td>Win 95+ / OSX.1+</td>
        <td>1</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>
  </div>
</div>

Script:

    <script>
  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
  });
</script>

Now, this code above with the script tag inside the html file works just fine; but this doesn't work for angular.

Here is my attempt to get it working in angular by modifying the component file,

Angular component:

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

import { customTableScript } from 'assets/custom/js/tablescript.js';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class ListUserComponent implements OnInit {
  callCustomTableScript(): any {
    customTableScript();

  }


  constructor( private renderer: Renderer2) { }

  renderExternalScript(src: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    script.async = true;
    script.defer = true;
    this.renderer.appendChild(document.body, script);
    return script;
  }




  ngOnInit(): void {
    const script = customTableScript.appendToTable(document.getElementById('example1'));
    this.renderExternalScript(script).onload = () => {
      console.log('Google API Script loaded');
      // do something with this library
    };
  }

}

The Error: Cannot read property 'appendToTable' of undefined