Angular Datatables - - Bootstrap 4 & Material Design

                    import { Component, OnInit, HostListener, ViewChildren, QueryList, ElementRef } from '@angular/core';
                    import { Http } from '@angular/http';
                    @Component({
                      selector: 'app-datatables',
                      templateUrl: './datatables.component.html',
                      styleUrls: ['./datatables.component.scss'],
                    })
                    export class AppDatatablesComponent implements OnInit {
                    @ViewChildren('list') list: QueryList<ElementRef>;
                      paginators: Array<any> = [];
                      activePage: number = 1;
                      firstVisibleIndex: number = 1;
                      lastVisibleIndex: number = 10;
                      url: any = 'https://jsonplaceholder.typicode.com/posts';
                      tableData = [];
                      sorted = false;
                      searchText: string;
                      firstPageNumber: number = 1;
                      lastPageNumber: number;
                      maxVisibleItems: number = 20;
                    
                      constructor(private http: Http) { }
                    
                      getData() {
                        return this.http.get(this.url);
                      }
                    
                      ngOnInit() {
                        this.getData().subscribe((next: any) => {
                          next.json().forEach((element: any) => {
                            this.tableData.push({ id: (element.id).toString(), title: element.title, body: element.body });
                          });
                        });
                    
                        setTimeout(() => {
                          for (let i = 1; i <= this.tableData.length; i++) {
                            if (i % this.maxVisibleItems === 0) {
                              this.paginators.push(i / this.maxVisibleItems);
                            }
                          }
                          if (this.tableData.length % this.paginators.length !== 0) {
                            this.paginators.push(this.paginators.length + 1);
                          }
                          this.lastPageNumber = this.paginators.length;
                          this.lastVisibleIndex = this.maxVisibleItems;
                        }, 200);
                    
                      }
                    
                      @HostListener('input') oninput() {
                        this.paginators = [];
                        for (let i = 1; i <= this.search().length; i++) {
                          if (!(this.paginators.indexOf(Math.ceil(i / this.maxVisibleItems)) !== -1)) {
                            this.paginators.push(Math.ceil(i / this.maxVisibleItems));
                          }
                        }
                        this.lastPageNumber = this.paginators.length;
                      }
                      changePage(event: any) {
                        if (event.target.text >= 1 && event.target.text <= this.maxVisibleItems) {
                          this.activePage = +event.target.text;
                          this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
                          this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
                        }
                      }
                    
                      nextPage() {
                        this.activePage += 1;
                        this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
                        this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
                      }
                      previousPage() {
                        this.activePage -= 1;
                        this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
                        this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
                      }
                    
                      firstPage() {
                        this.activePage = 1;
                        this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
                        this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
                      }
                    
                      lastPage() {
                        this.activePage = this.lastPageNumber;
                        this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
                        this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
                      }
                    
                      sortBy(by: string | any): void {
                        if (by == 'id') {
                          this.search().reverse();
                        } else {
                          this.search().sort((a: any, b: any) => {
                            if (a[by] < b[by]) {
                              return this.sorted ? 1 : -1;
                            }
                            if (a[by] > b[by]) {
                              return this.sorted ? -1 : 1;
                            }
                            return 0;
                          });
                        }
                        this.sorted = !this.sorted;
                      }
                    
                      filterIt(arr: any, searchKey: any) {
                        return arr.filter((obj: any) => {
                          return Object.keys(obj).some((key) => {
                            return obj[key].includes(searchKey);
                          });
                        });
                      }
                    
                      search() {
                        if (!this.searchText) {
                          return this.tableData;
                        }
                        if (this.searchText) {
                          return this.filterIt(this.tableData, this.searchText);
                        }
                      }
                    }
                    
            

          import { HttpClient } from '@angular/common/http';
          import { Component, OnInit, ElementRef, HostListener, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core';
          import { MdbTableDirective, MdbTablePaginationComponent, MdbTableService } from 'ng-uikit-pro-standard';
          @Component({
            selector: 'data-from-api',
            templateUrl: './data-from-api.component.html',
            styleUrls: ['./data-from-api.component.scss'],
          })
          export class DataFromApiComponent implements OnInit, AfterViewInit {
            @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective;
            @ViewChild(MdbTablePaginationComponent) mdbPagination: MdbTablePaginationComponent;
            @ViewChild('row') row: ElementRef;

            elements: any = [];
            headElements = ['ID', 'First', 'Last', 'Handle'];

            searchText: string = '';
            previous: string;

            firstItemIndex;
            lastItemIndex;

            url = 'https://jsonplaceholder.typicode.com/posts';

            constructor(
              private tableService: MdbTableService,
              private cdRef: ChangeDetectorRef,
              private http: HttpClient) { }

            @HostListener('input') oninput() {
              this.mdbPagination.searchText = this.searchText;
            }

            ngOnInit() {
              this.http.get(this.url).subscribe((data: any) => {
                data.forEach((el: any) => {
                  this.elements.push({
                    id: el.id.toString(),
                    first: el.title,
                    last: el.body,
                    handle: 'Handle ' + el.id.toString()
                  });
                });
                this.tableService.setDataSource(this.elements);
              });
              this.elements = this.tableService.getDataSource();
              this.previous = this.tableService.getDataSource();
            }

            ngAfterViewInit() {
              this.mdbPagination.setMaxVisibleItemsNumberTo(10);
              this.firstItemIndex = this.mdbPagination.firstItemIndex;
              this.lastItemIndex = this.mdbPagination.lastItemIndex;

              this.mdbPagination.calculateFirstItemIndex();
              this.mdbPagination.calculateLastItemIndex();

              this.cdRef.detectChanges();
            }

            onNextPageClick(data: any) {
              this.firstItemIndex = data.first;
              this.lastItemIndex = data.last;
            }

            onPreviousPageClick(data: any) {
              this.firstItemIndex = data.first;
              this.lastItemIndex = data.last;
            }

            searchItems() {
              const prev = this.tableService.getDataSource();

              if (!this.searchText) {
                this.tableService.setDataSource(this.previous);
                this.elements = this.tableService.getDataSource();
              }

              if (this.searchText) {
                this.elements = this.tableService.searchLocalDataBy(this.searchText);
                this.tableService.setDataSource(prev);
              }

              this.mdbPagination.calculateFirstItemIndex();
              this.mdbPagination.calculateLastItemIndex();

              this.tableService.searchDataObservable(this.searchText).subscribe((data: any) => {
                if (data.length === 0) {
                  this.firstItemIndex = 0;
                }

              });
            }
          }