I have a calendar page, when I swipe, the month will change(use Swiperjs in Ionic angular) but when I swipe view does not update until I click anywhere, my code:

month-view.component.html

<swiper (swiper)="setSwiperInstance($event)" [loop]="true" [centeredSlides]="true" pager="false" (slideChangeTransitionEnd)="onSlideChanged()" (touchEnd)="touchEnd()" (touchStart)="touchStart()">
        <ng-template swiperSlide *ngFor="let slideIdx of SLIDE_INDEX_ARR">
            <table class="fc-mv-table">
                <thead class="fc-head">
                    <tr>
                        <td class="fc-head-container">
                          <px-widget-header [dayHeaders]="views[slideIdx]?.dayHeaders">
                          </px-widget-header>
                        </td>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="fc-widget-content">
                        <div class="fc-day-grid-container">
                            <div class="fc-day-grid">
                                <div class="fc-row" *ngFor="let row of ROW">
                                    <div class="fc-back fc-bg">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <td *ngFor="let col of COL" 
                                                        [ngClass]="(displayWeekendColor ? getBgColor(slideIdx, col) : '') + ' fc-day'">
                                                        <px-widget-bg [date]="views[slideIdx]?.dates[row*7+col]">
                                                        </px-widget-bg>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="fc-back fc-fg" *ngIf="(slider?.activeIndex + 2) % 3 === slideIdx">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <td *ngFor="let col of COL" class="fc-day">
                                                        <px-widget-fg [date]="views[slideIdx]?.dates[row*7+col]" (selected)="select($event)">
                                                        </px-widget-fg>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="fc-content-skeleton" *ngIf="(slider?.activeIndex + 2) % 3 === slideIdx">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <td *ngFor="let col of COL" class="fc-day-top">
                                                        <px-widget-skeleton [date]="views[slideIdx]?.dates[row*7+col]">
                                                          <!-- {{views[slideIdx]?.dates[row*7+col]?.label}} -->
                                                        </px-widget-skeleton>
                                                    </td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                  <td *ngFor="let col of COL" class="fc-event-mark">
                                                    <div class="fc-mark-container">
                                                      <div class="fc-notime-mark" *ngIf="views[slideIdx]?.dates[row*7+col]?.hasNoTime"></div>
                                                      <div class="fc-banner-mark" *ngIf="views[slideIdx]?.dates[row*7+col]?.hasBanner"></div>
                                                    </div>
                                                  </td>
                                                </tr>
                                                 <ng-container *ngFor="let iev of ievArr">
                                                    <tr *ngIf="hasEvent(views[slideIdx], slideIdx, row, iev)">
                                                        <td *ngFor="let col of COL" class="fc-event">
                                                            <div *ngFor="let evt of getEvent(views[slideIdx], row, col, iev)">
                                                                <ng-template 
                                                                    [ngTemplateOutlet]="monthviewDisplayEventTemplate"
                                                                    [ngTemplateOutletContext]="{ $implicit: evt }">
                                                                </ng-template>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </ng-container>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </ng-template>
    </swiper>

month-view.component.ts

  onSlideChanged(): void {
      if (this.callbackOnInit) {
        this.callbackOnInit = false;

        return;
      }

      let currentSlideIndex = this.slider.activeIndex,
        direction = Direction.Current,
        currentViewIndex = this.currentViewIndex;

      currentSlideIndex = (currentSlideIndex + MAX_SLIDE_INDEX) % MAX_SLIDE;
      if (currentSlideIndex - currentViewIndex === 1) {
        direction = Direction.Next;
      } else if (currentSlideIndex === 0 && currentViewIndex === MAX_SLIDE_INDEX) {
        direction = Direction.Next;
        this.slider.slideTo(1, 0, false);
      } else if (currentViewIndex - currentSlideIndex === 1) {
        direction = Direction.Prev;
      } else if (currentSlideIndex === MAX_SLIDE_INDEX && currentViewIndex === 0) {
        direction = Direction.Prev;
        this.slider.slideTo(MAX_SLIDE, 0, false);
      }

      this.currentViewIndex = currentSlideIndex;
      this.move(direction);
      // TODO AIT Migration
  }
  move(direction: Direction): void {
    if (direction === Direction.Current) return;
    this.cd.detach();
    this.direction = direction;

    if (!this.moveOnSelected) {
      let adjacentDate = this.calendarService.getAdjacentCalendarDate(
        this.mode,
        direction
      );
      this.calendarService.setCurrentDate(adjacentDate);
    }

    this.direction = Direction.Current;
    this.refreshView();
    this.cd.reattach();
    this.moveOnSelected = false;
  }
  refreshView(): void {
    this.range = this.getRange(this.calendarService.currentDate);
    this.calendarService.rangeChanged(this);

    if (this.inited) {
      let title = this.getTitle();
      this.onTitleChanged.emit(title);
    }
      this.calendarService.populateAdjacentViews(this);
    this.updateCurrentView(
      this.range.startTime,
      this.views[this.currentViewIndex]
    );
  }

px-widget-skeleton.ts

@Component({
    selector: "px-widget-skeleton",
    template: `
    <div [ngClass]="cssClasses">
    {{_date?.label}}
    </div>`,
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    preserveWhitespaces: false
  })
  export class WidgetSkeletonComponent implements OnDestroy {
    @Input()
    set date(value: IMonthViewRow) {
      this._date = value;
      if (value) {
        if (!this._differ) {
          this._differ = this._differs.find(value).create();
        }
        this.cssClasses = this.getHighlightClassSkeleton();
      } else {
        this.cssClasses = null;
      }
    }
    _date: IMonthViewRow;

    cssClasses: string;
  
    private _differ: KeyValueDiffer<any, any>;
  
    constructor(private cd: ChangeDetectorRef, private _differs: KeyValueDiffers) {
      //NOPE
      
    }
  
    /**
     * Check for changes
     */
    ngDoCheck() {
      if (this._differ) {
        const changes = this._differ.diff(this._date);
        if (changes) {
          // this.cssClasses = this.getHighlightClassSkeleton();
          this.cd.markForCheck();
        }
      }
    }
  
    /**
     * On destroy
     */
    ngOnDestroy() {
      this._differ = null;
      this._date = null;
      this.cd = null;
    }
  
    /**
     * Get highlight class
     */
    getHighlightClassSkeleton(): string {
      let date = this._date;
      let classNames: Array<string> = [];
  
      if (date) {
        if (date.selected) {
          classNames.push("fc-mv-selected");
        }
        if (date.secondary) {
          classNames.push("fc-other-month");
        }
      }
  
      return classNames.join(' ');
    }
  }

when swipe onSlideChanged() change this.views update but [date]="views[slideIdx]?.dates[row*7+col]" in px-widget-skeleton not update until I click any where, thank you so much !