Swiper.js pagination issue - Angular 18

I'm using Angular 18 and Swiper.js

The problem is that the pagination disappears for one of the *ngIf in the parent HTML, when there is no *ngIf and when the component with the swiper is located once in the html, everything works as it should. It looks like pagination only renders in the first call of the carousel template which is not shown and then it doesn't render in the second one either.

Also, when custom pagination is not used, but when we only have pagination:true, everything works as it should.

In the parent HTML I have this:

<div class="tw-grid tw-grid-cols-dashboard tw-gap-8" *ngIf="isMediumPlus">
<div class="tw-flex tw-flex-col tw-gap-8">
<ng-container *ngTemplateOutlet="carouselTemplate"></ng-container>
...
<div>
</div>
<div class="tw-grid tw-grid-cols-1 tw-gap-8" *ngIf="!isMediumPlus">
<ng-container *ngTemplateOutlet="carouselTemplate"></ng-container>
...
<div>

<ng-template #carouselTemplate>
<dashboard-carousel
[slides]="slides"
><dashboard-carousel>
</ng-template>


There is swiper in dashboard-carousel component

<div>
<swiper-container
#swiperRef
swiperDirective
[config]="config"
(swiperslidechange)="slideChange($event)"
init="false"
>
<swiper-slide *ngFor="let slide of slides">
<slide>
...
</slide>
</swiper-slide>
</swiper-container>

<div class="swiper-pagination"></div>
<div>


.ts:

@ViewChild('swiperRef') swiperRef!: ElementRef<SwiperContainer>;
@Input() slides;
public config: SwiperOptions;

ngOnInit(): void {
this.config = {
spaceBetween: 17,
slidesPerView: 1,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
};
}


directive:

@Directive({
selector: '[swiperDirective]',
})
export class SwiperDirective implements AfterViewInit {
@Input() config?: SwiperOptions;

constructor(private el: ElementRef<SwiperContainer>) {}

ngAfterViewInit(): void {
Object.assign(this.el.nativeElement, this.config);

this.el.nativeElement.initialize();
}
}


I expect that custom pagination does not disappear when changing *ngIf

Continue reading...