Expected behavior Table search should be executed

Actual behavior Component is not working and giving Uncaught TypeError:"exports" is read-only in console.

Resources (screenshots, code snippets etc.) //Mycomponent TS file import { Component, OnInit,HostListener, ViewChild } from '@angular/core'; import { TablechangeService } from 'src/app/services/tablechange.service'; import {MdbTableDirective} from 'mdbootstrap';

@Component({ selector: 'app-user-table', templateUrl: './user-table.component.html', styleUrls: ['./user-table.component.scss'] }) export class UserTableComponent implements OnInit { @ViewChild(MdbTableDirective, {static: true}) mdbTable: MdbTableDirective; elements: any = []; headElements = ['ID', 'First', 'Last', 'Handle']; searchText: string = ''; previous: string;

constructor(private tc: TablechangeService) { }

@HostListener('input') oninput() { this.searchItems(); } tabledata=[]; ngOnInit(): void {

for (let i = 1; i <= 10; i++) {
  this.elements.push({
      id: i.toString(), first: 'Wpis ' + i, last: 'Last ' + i, handle: 'Handle ' + i
  });

} this.mdbTable.setDataSource(this.elements); this.previous = this.mdbTable.getDataSource();

this.tc.gettinginfo().subscribe(
  data=> {
    this.tabledata=data;  
  },
  error => {
      console.log("Error!",error);       
    }  
)

} searchItems() { const prev = this.mdbTable.getDataSource(); if (!this.searchText) { this.mdbTable.setDataSource(this.previous); this.elements = this.mdbTable.getDataSource(); } if (this.searchText) { this.elements = this.mdbTable.searchLocalDataBy(this.searchText); this.mdbTable.setDataSource(prev); } }

} //app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import {AuthGuard} from './gaurds/auth.guard'; import { JwtHelperService, JWT_OPTIONS } from '@auth0/angular-jwt';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatInputModule } from '@angular/material/input'; import {MatDatepickerModule} from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatSelectModule } from '@angular/material/select'; import { NavbarComponent } from './components/navbar/navbar.component'; import { LoginComponent } from './pages/login/login.component'; import { LandingComponent } from './pages/landing/landing.component'; import { SignupComponent } from './pages/signup/signup.component'; import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; import { ForgotComponent } from './pages/forgot/forgot.component'; import { ChangepwComponent } from './components/changepw/changepw.component'; import { RoyalityComponent } from './pages/royality/royality.component'; import { ProfileComponent } from './pages/profile/profile.component'; import { AuthoritydashboardComponent } from './pages/authoritydashboard/authoritydashboard.component'; import { UserTableComponent } from './components/user-table/user-table.component'; import { AddpageComponent } from './pages/addpage/addpage.component';

@NgModule({ declarations: [ AppComponent, NavbarComponent, LoginComponent, LandingComponent, SignupComponent, DashboardComponent, SidebarComponent, ForgotComponent, ChangepwComponent, RoyalityComponent, ProfileComponent, AuthoritydashboardComponent, UserTableComponent, AddpageComponent, ], imports: [ BrowserModule, AppRoutingModule, MDBBootstrapModule.forRoot(), BrowserAnimationsModule, FormsModule, MatInputModule, MatDatepickerModule, MatNativeDateModule, MatButtonModule, MatIconModule, MatSelectModule, ReactiveFormsModule, HttpClientModule ], providers: [AuthGuard,{provide: JWT_OPTIONS, useValue: JWT_OPTIONS},JwtHelperService], bootstrap: [AppComponent] }) export class AppModule { }