Angular 6 DataTables initially display but filter controls does not work

Hello,

I am trying to add DataTable to my grid on Angular 6. The grid initially displays with JSON data. However, when I click on the number of records 10, 25, 50, 100, Column Sorting, Search text, or the pagination controls, all the grid data disappears.

I have to reload the page to see the data again.

I installed the following to my project

npm install bootstrap@4.0.0-beta.2 --save --save-exact
npm install datatables.net --save
npm install datatables.net-bs4 --save
npm install jquery --save
npm install @types/jquery --save-dev

Any help is greatly appreciated.

Here is my users.components.ts

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

import { UserService } from '../../services/user.service';
import { Observable } from 'rxjs';
import { User } from '../../models/user';
import 'rxjs/add/Observable/throw'

import * as $ from 'jquery';
import 'datatables.net';
import 'datatables.net-bs4';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})

export class UsersComponent implements OnInit {

  users$: any[];
  datatable: any;
 
  constructor(private userService: UserService, private chRef: ChangeDetectorRef ) 
  { 
  }

  ngOnInit() {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers()
    .subscribe(( data: any[] )=> {
      this.users$ = data;
      (error) => {
               this.statusMessage = 'Problem with the service. Please try again later.';  
               console.error(error);
            }
      ;

     // this.chRef.detectChanges();
      const table: any = $('table');
      this.datatable = table.DataTable();
    });
  }
}



users.component.scss

@import "~bootstrap/dist/css/bootstrap.css";
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";