Reply To: Carousel in angular with ngFor

[Support]

Hello,

This issue occurs because the code of theme.init.js is running before the ngFor content is added to the page.

The way is initialize the carousel manually after the new items are added on DOM.

For it you need this HTML:

<div class="my-custom-carousel owl-carousel owl-theme manual">
	<div *ngFor="let dataitem of data" class="item ml-1 mr-1">
		<app-customcomponent [data]="dataitem"></app-customcomponent>
	</div>
</div>

And this JS code to initialize the carousel:

$('.my-custom-carousel').owlCarousel({
	dots: false,
	autoplay: false,
	loop: true,
	margin: 0,
	nav: true,
	responsive: {
		0: {
			items: 1
		},
		600: {
			items: 3
		},
		1000: {
			items: 6
		},
	}
});

But note you need run the code above after the carousel items are added in the DOM. I don’t know Angular 10, but probably the ngFor you are using should trigger an event when content is added to DOM. You should use this event to run the owlCarousel code. For example:

$(window).on('ngFor.content.is.already.in.the.dom', function(){
	
	$('.my-custom-carousel').owlCarousel({
		dots: false,
		autoplay: false,
		loop: true,
		margin: 0,
		nav: true,
		responsive: {
			0: {
				items: 1
			},
			600: {
				items: 3
			},
			1000: {
				items: 6
			},
		}
	});
	
});

We hope this helps!

Kind Regards,

Rodrigo.

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---