hi i got this error with the swiper angular

Question

core.js:4352 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'swiper-slide swiper-slide-active '. Current value: 'swiper-slide '.

this is my code :

        <swiper [slidesPerView]="1" [spaceBetween]="50" [navigation]="true" [pagination]="{ clickable: true }" [scrollbar]="{ draggable: true }">

            <ng-template swiperSlide *ngFor="let advertiser of staticAdvertisers; let indice=index">

                <a [href]="[advertiser?.link]" target="_blank">

                    <div class="item-container">
                    
                        <div class="advert-cover display-feed-player">
                
                                                
                            
                        </div>
                        
                    </div>   

                </a>
        
            </ng-template>

        </swiper>

    </div>    

and this the .ts

import SwiperCore, { Navigation, Swiper } from "swiper/core";

SwiperCore.use([Navigation]);

@UntilDestroy()

@Component({ selector: 'app-social', templateUrl: './social.component.html', styleUrls: ['./social.component.scss'], animations: [ trigger('fadeIn', [ transition(':enter', [ style({ opacity: '0' }), animate('0.8s ease', style({ opacity: '1' })), ]), ]), ], })

export class SocialComponent implements OnInit, AfterViewInit, OnDestroy {

public getUsernameOrId = getUsernameOrId;
private user;
public currentUser;
public playerUrl = environment.playerUrl;


/* styleTest */
public desktop: any = screen.width >= 1200;
public laptop: any = screen.width >= 1024 && screen.width < 1200;
public tablet: any = screen.width >= 768 && screen.width < 1024;
public mobile: any = screen.width === 320 && screen.width < 768;
/* styleTest */

thanks in advance .

question from:https://stackoverflow.com/questions/65899161/hi-i-got-this-error-with-the-swiper-angular

Answer 1

the "ExpressionChangedAfterItHasBeenCheckedError" telling that you've changed something after initialization.

based on your provided code, it seems that you are removing "swiper-slider" class from element, or replacing it with another one...

"swiper-slide" class must be on ever slide element, always !

here's default implementation of swiper

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>