Incompetible with Ngx Perfect Scrollbar after page reload

[alex-chaliy]

I have a component like Ticket List that implements Perfect Scrollbar and Infinite Scroll features using libs ngx-perfect-scrollbar and ngx-infinite-scroll. I combined these libs together according to the example on Stackblitz. https://stackblitz.com/edit/ngx-infinite-scroll-plus-ngx-perfect-scrollbar-dgecek

At first it works fine, I can see the perfect scrollbar and infinite scroll works as well. But after page reload perfect scrollbar disappears and the native scrollbar is shown. However infinite scroll still works. How can I solve this issue?

ticket-list.component.html

<div class="ticket-list__content"
  infiniteScroll
  (scrolled)="loadMoreTickets()"
  [scrollWindow]="false"
  [infiniteScrollDistance]="1"
  [infiniteScrollThrottle]="1000"
  [perfectScrollbar]="perfectScrollbarConfig"
>
  <div class="ticket__container" *ngFor="let ticket of tickets">
    <app-list-item
      class="ticket"
      [title]="ticket?.id"
      [description]="ticket?.name"
      [date]="ticket?.creation_time"
    ></app-list-item>
  </div>
</div> 

ticket-list.component.scss

.ticket-list {
  &__content {
    height: 652px;
    overflow-y: auto;
    position: relative;
  }
}

ticket-list.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Ticket } from '../../../models/ticket/Ticket';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { getTicketState } from 'src/app/core/reducers/ticket/ticket.reducer';
import { Store } from '@ngrx/store';
import { AppState } from 'src/app/app.reducer';

@Component({
  selector: 'app-ticket-list',
  templateUrl: './ticket-list.component.html',
  styleUrls: ['./ticket-list.component.scss']
})
export class TicketListComponent implements OnInit {
  @Input() public tickets: Ticket[];
  @Output() private nextPageOfTicketsRequested: EventEmitter<void> = new EventEmitter<void>();

  public perfectScrollbarConfig: PerfectScrollbarConfigInterface = {
    suppressScrollX: false
  };

  constructor(private store: Store<AppState>) {}

  public ngOnInit(): void {
  }

  public loadMoreTickets(): void {
    this.nextPageOfTicketsRequested.emit();
  }
}

ticket-list.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TicketListComponent } from './ticket-list/ticket-list.component';
import { ListItemComponent } from './list-item/list-item.component';
import { ListFilterComponent } from './list-filter/list-filter.component';

import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  declarations: [TicketListComponent, ListItemComponent, ListFilterComponent],
  exports: [TicketListComponent, ListFilterComponent],
  imports: [
    CommonModule,
    PerfectScrollbarModule,
    InfiniteScrollModule
  ],
  providers: []
})
export class TicketListModule {}

[alex-chaliy]

It seems like Infinite Scroll resets Perfect Scrollbar on the initialization step.