The disconnect method of @angular/cdk/collections DataSource<T> is not being called

Question

The disconnect method of the custom DataSource is not being called when I leave the page that has initialized it.

I have developed a custom DataSource so I could use a table with server sort and pagination.

Everything works nice, the connected method is called when the custom DataSource class is initialized with the new CustomDataSource() in my page ngOnInit method, but when I get out of the page, the disconnect method, that shoud clean the used subjects, is not called.

class SomeComponent implements OnInit, OnChanges, AfterViewInit {
  ngOnInit(): void {
     this.dataSource = new CustomDataSource(this.logService, 
     this.mensagemService);
  }
}

class ProcessosLogsDataSource implements DataSource<LogModel> {
  private logsSubject = new BehaviorSubject<LogModel[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);
  private lengthSubject = new BehaviorSubject<number>(0);
  public loading$ = this.loadingSubject.asObservable();
  public length$ = this.lengthSubject.asObservable();

  constructor(
      private logService: LogService,
      private mensagemService: MensagemService) { }

  connect(collectionViewer: CollectionViewer): Observable<ProcessoLogModel[]> { // is being called when the dataSource is being initialized in the SomeComponent ngOnInit method
      return this.logsSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {// not being called
      this.logsSubject.complete();
      this.loadingSubject.complete();
      this.lengthSubject.complete();
  }
}

Answer 1

After @Maryannah help I could call the disconnect method in the ngOnDestroy, the only thing I needed to change in my code was to call the ngOnDestroy in my component and to expose the MatTable component with the @ViewChild decorator.

@ViewChild(MatTable, {static: false}) table: MatTable<LogModel>;

ngOnDestroy(): void {
  this.dataSource.disconnect(this.table);
}