*ngIf not detecting changes on variable change on swiper.js (slideChange) event but detects on swiperRef.slideTo(index ) call

Question

iam passing an array of object containing photo url to swiper container, for unverified photo iam showing a a text, on each slide change i have to check photos verification status the variable is changing to true or false but dom is not updating even when i inspect it shows

    ng-reflect-ng-if :'true;

but i have to scroll to a specific slide on user clicking on specific thumbnail

for that iam using

this.photoPopupSlider.swiperRef.slideTo(RowIndex, sliderSpeed);

at this time onSlidChange event triggers updates the dom correctly

my component.html 👇

    <div style="padding: 0">
        <swiper
          [config]="sliderConfig"
          class="sliderBox"
          [pagination]="false"
          (slideChange)="onSlideChange($event)"
          #photoPopupSlider
        >
          <ng-template swiperSlide *ngFor="let pic of myPhotos">
            <div
              class="slide_wrap"
              style="height: 68vh; background: #f3f4f9"
            >
              <img
                [src]="pic.image"
                class="slide_img"
                style="height: auto; width: auto; max-width: 100%"
              />
            </div>
          </ng-template>
        </swiper>
        <span
          id="photo_under_verification"
          *ngIf="underVerification"
          class="ph_uv"
          >Photo under verification</span
        >
      </div>

my component.ts file 👇

    underVerification = false;
    onSlideChange([swiper]: any) {
      const index = swiper.activeIndex;
      this._ps.sliderIndex = index;
      this.sliderIndex = index;
      console.log("sliderChanged", this.sliderIndex);

      const photoShowingInSlider = this.myPhotos[index];
      const isPhotoUnderVerification =
        photoShowingInSlider?.photostatus == "0" ? true : false;
      this.underVerification = isPhotoUnderVerification;
      console.log("under", isPhotoUnderVerification);

       // const photUnderVerifyMsg = document.getElementById(
       //   "photo_under_verification"
       // ).style;

       // if (isPhotoUnderVerification) photUnderVerifyMsg.display = "inline";
       // else photUnderVerifyMsg.display = "none";
    }

actually i was able to implement the logic by using document.getElemntById

those commented lines of code ( i thing it is a bad way in angular to access dom that way )

how can implement this login in angular way ( means not accessing dom directly ) ?

Answer 1

Well, you have to tell Angular to run change detection as the code under onSlideChange (and other events) runs outside of Zone

Note that Swiper Angular component all events emits outside of NgZone for better perfomance. Dont forget to use ngzone.run or ChangeDetector if you need to change view (e.g slides) in event handlers (e.g slideChange).

import the ChangeDetectorRef in the constructor and call the detectChange method in onSlideChange method

this.cd.detectChanges()

Here is the working code. I just take a random stackblitz link so adapt to your swiper version: https://stackblitz.com/edit/swiper-angular-example-rmgv2b