title: ERROR TypeError: Cannot read property 'sortChange' of undefined,This error is showing?
body: <p>Plz guide me,while loading this page,&quot;ERROR TypeError: Cannot read property 'sortChange' of undefined,&quot;this error is showing,Declared all in module and component,only this error is showing
  TS</p>
  <pre><code>import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
  import { SelectionModel } from '@angular/cdk/collections';
  import { Observable,fromEvent, merge, Subscription, of } from 'rxjs';// RXJS
  import { CalendarDataSource } from '../../../../core/e-commerce';
  import { environment } from '../../../../../environments/environment';
  import { ToastrService } from 'ngx-toastr';
  import { LayoutUtilsService, MessageType, QueryParamsModel } from '../../../../core/_base/crud';
  
  // NGRX
  import { Store, ActionsSubject } from '@ngrx/store';
  import { AppState } from '../../../../core/reducers';
  import { TranslateService } from '@ngx-translate/core';
  
  import { MatPaginator, MatSort, MatDialog,MatSnackBar } from '@angular/material';
  import { LayoutConfigService, SubheaderService } from '../../../../core/_base/layout';
  
  import { CalendarModel, CalendarsPageRequested, OneCalendarDeleted, ManyCalendarsDeleted, CalendarsStatusUpdated ,CalendarsReset} from '../../../../core/e-commerce';
  import { AuthNoticeService, AuthService, Register, User , UserService } from '../../../../core/auth/';
  import { ActivatedRoute, Router, RouterLinkWithHref } from '@angular/router';
  import { debounceTime, distinctUntilChanged, tap, skip, delay, take } from 'rxjs/operators';
  
  let customerdashurl = environment.customerdashboardurl;
  let commonUrl = environment.commonUrl;
  
  export interface PeriodicElement {
    name: string;
    position: number;
    weight: number;
    symbol: string;
    description: string;
  }
  @Component({
    selector: 'kt-eventmanager',
    templateUrl: './eventmanager.component.html',
    styleUrls: ['./eventmanager.component.scss']
  })
  export class EventmanagerComponent implements OnInit {
    dataSource:CalendarDataSource;
    displayedColumns = ['accountId','accountName','companyName','properties','plans','subscribe','emailOut','smsOut','resync','action'];
    expandedElement: PeriodicElement | null;
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    @ViewChild('sort1', {static: true}) sort: MatSort;
    // Filter fields
    @ViewChild('searchInput', {static: true}) searchInput: ElementRef;
    filterStatus: string = '';
    filterType: string = '';
    // Selection
    selection = new SelectionModel&lt;CalendarModel&gt;(true, []);
    templatesResult: CalendarModel[] = [];
    private subscriptions: Subscription[] = [];
    superadminId:string;
    shownorecords:boolean=false;
    apicallcnt:number=0;
    sendParams:any={};
    searchcriteria:any={};
  
    constructor(public dialog: MatDialog,
      public snackBar: MatSnackBar,
      private layoutUtilsService: LayoutUtilsService,
      private translate: TranslateService,
      private store: Store&lt;AppState&gt;,
      private router: Router,
      private layoutConfigService: LayoutConfigService,
      private userService: UserService,
      private subheaderService: SubheaderService,
      private toastr:ToastrService,
  ) { }
  
    ngOnInit() {
      this.subheaderService.setTitle(this.translate.instant('Subscriptions'));
      this.store.dispatch(new CalendarsReset());
      this.superadminId = localStorage.getItem('superadminId');
      this.layoutConfigService.reloadConfigs();
      // If the user changes the sort order, reset back to the first page.
      const sortSubscription = this.sort.sortChange.subscribe(() =&gt; (this.paginator.pageIndex = 0));
      this.subscriptions.push(sortSubscription);
  
      /* Data load will be triggered in two cases:
      - when a pagination event occurs =&gt; this.paginator.page
      - when a sort event occurs =&gt; this.sort.sortChange
      **/
      const paginatorSubscriptions = merge(this.sort.sortChange, this.paginator.page).pipe(
        tap(() =&gt; this.loadCustomersList())
      )
      .subscribe();
      this.subscriptions.push(paginatorSubscriptions);
  
      // Filtration, bind to searchInput
      // const searchSubscription = fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
      //   debounceTime(50), // The user can type quite quickly in the input box, and that could trigger a lot of server requests. With this operator, we are limiting the amount of server requests emitted to a maximum of one every 150ms
      //   distinctUntilChanged(), // This operator will eliminate duplicate values
      //   tap(() =&gt; {
      //     this.paginator.pageIndex = 0;
      //     this.loadCustomersList();
      //   })
      // )
      // .subscribe();
      // this.subscriptions.push(searchSubscription);
      // Init DataSource
      this.dataSource = new CalendarDataSource(this.store);
  
      console.log(this.dataSource);
      const entitiesSubscription = this.dataSource.entitySubject.pipe(
        skip(1),
        distinctUntilChanged()
      ).subscribe(res =&gt; {
        this.templatesResult = res;
        this.apicallcnt++;
        if(this.templatesResult.length == 0 &amp;&amp; this.apicallcnt&gt;2)
        {this.shownorecords = true;}else{this.shownorecords=false;}
      });
      this.subscriptions.push(entitiesSubscription);
      // First load
      of(undefined).pipe(take(1), delay(1000)).subscribe(() =&gt; { // Remove this line, just loading imitation
        this.loadCustomersList();
      }); // Remove this line, just loading imitation
    }
    loadCustomersList() {
      this.selection.clear();
  
      const queryParams = new QueryParamsModel(
        this.filterConfiguration(),
        this.sort.direction,
        this.sort.active,
        this.paginator.pageIndex,
        this.paginator.pageSize
      );
      // Call request from server
      this.store.dispatch(new CalendarsPageRequested({ page: queryParams }));
      this.selection.clear();
    }
  
    filterConfiguration(): any {
      const filter: any = {};
      const searchText: string = this.searchInput.nativeElement.value;
    
      if (this.filterStatus &amp;&amp; this.filterStatus.length &gt; 0) {
        filter.status = +this.filterStatus;
      }
    
      if (this.filterType &amp;&amp; this.filterType.length &gt; 0) {
        filter.type = +this.filterType;
      }
    
      filter.accountName = searchText;
      if (!searchText) {
        return filter;
      }
    
      filter.email = searchText;
    
      filter.companyName = searchText;
      // filter.userName = searchText;
    
      // filter.id = searchText;
      return filter;
      }
    
  }
  </code></pre>
  <p>Plz guide me,while loading this page,&quot;ERROR TypeError: Cannot read property 'sortChange' of undefined,&quot;this error is showing,Declared all in module and component,only this error is showing TS</p>