Proper way to tell swiper to update itself when items are pushed with Angular

[muuvmuuv]

I am trying to lets Swiper know that if any items are given to my swiper component that it should update itself and on any new item being pushed to it. Currently without calling update() manually it displays all items on full width underneath each other.

This is how I do it atm to have less layout shifts:

1. I set a min height on the swiper that is approximate the height an Swiper slide will have
2. I call the update inside an effect (same as ngOnInit) with an timeout (since rendering of Angular components takes a bit)
3. I created another effect that is re-called on any Signal change. Here it is called twice, since with timeout I had minor layout shifts and without it hasn't had the correct height later

	@ViewChild('slider', { static: true }) readonly slider?: ElementRef<SwiperContainer>

	readonly $$itemsEffect = effect(() => {
		void this.items() // Fake usage
		this.slider?.nativeElement.swiper.update()
		setTimeout(() => {
			this.slider?.nativeElement.swiper.update()
		}, 100)
	})

	constructor() {
		effect(() => {
			setTimeout(() => {
				this.slider?.nativeElement.swiper.update()
			}, 100)
		})
	}