owl-carousel is not working with *ngfor loop in angular with html template

Question

I have html 5 template i am applying it with angular 9 which is using owl-carousel and it is working fine with static data. I want to use dynamic array with owl carousel i am using *ngfor loop but it is not working properly. When i try to use loop all items comes vertically and images are not showing properly.

<div class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="heading-title-alt text-left ">
                    <h3 class="text-uppercase">portfolio Carousel</h3>
                    <span class="text-uppercase">Lid est laborum dolo rumes fugats untras.</span>
                </div>

                <!--portfolio carousel-->
            <div *ngFor="let item of imageArr">
                <div id="portfolio-carousel" class="portfolio-with-title col-3 portfolio-gallery">
                    <div class="portfolio-item">
                        <div class="thumb">
                            <img src="assets/img/portfolio/01.jpg" alt="">
                            <div class="portfolio-hover">
                                <div class="action-btn">
                                    <a href="assets/img/portfolio/01.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h4><a href="assets/img/portfolio/01.jpg" class="popup-gallery2" title="lightbox view">perspiciatis unde omnis</a></h4>
                            <p><a href="#">category 1</a> , <a href="#">category 3</a>
                            </p>
                        </div>
                    </div>

                    <div class="portfolio-item">
                        <div class="thumb">
                            <img src="assets/img/portfolio/02.jpg" alt="">
                            <div class="portfolio-hover">
                                <div class="action-btn">
                                    <a href="assets/img/portfolio/02.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h4><a href="assets/img/portfolio/02.jpg" class="popup-gallery2" title="lightbox view">denouncing pleasure</a></h4>
                            <p><a href="#">category 1</a> , <a href="#">category 3</a>
                            </p>
                        </div>
                    </div>

                    <div class="portfolio-item">
                        <div class="thumb">
                            <img src="assets/img/portfolio/03.jpg" alt="">
                            <div class="portfolio-hover">
                                <div class="action-btn">
                                    <a href="assets/img/portfolio/03.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h4><a href="assets/img/portfolio/03.jpg" class="popup-gallery2" title="lightbox view">annoyances accepted</a></h4>
                            <p><a href="#">category 1</a> , <a href="#">category 3</a>
                            </p>
                        </div>
                    </div>

                    <div class="portfolio-item">
                        <div class="thumb">
                            <img src="assets/img/portfolio/04.jpg" alt="">
                            <div class="portfolio-hover">
                                <div class="action-btn">
                                    <a href="assets/img/portfolio/04.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h4><a href="assets/img/portfolio/04.jpg" class="popup-gallery2" title="lightbox view">annoyances accepted</a></h4>
                            <p><a href="#">category 1</a> , <a href="#">category 3</a>
                            </p>
                        </div>
                    </div>

                </div>
              </div>
                <!--portfolio carousel-->

            </div>
        </div>
    </div>
</div>

i have added this to default code for loop.

Here imageArr is the array of images.

<div class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="heading-title-alt text-left ">
                    <h3 class="text-uppercase">portfolio Carousel</h3>
                    <span class="text-uppercase">Lid est laborum dolo rumes fugats untras.</span>
                </div>

                <!--portfolio carousel-->

                <div id="portfolio-carousel" class=" portfolio-with-title col-3 portfolio-gallery">
                    <div class="portfolio-item" *ngFor="let item of imageArr">
                        <div class="thumb">
                            <img src="assets/img/portfolio/01.jpg" alt="">
                            <div class="portfolio-hover">
                                <div class="action-btn">
                                    <a href="assets/img/portfolio/01.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-title">
                            <h4><a href="assets/img/portfolio/01.jpg" class="popup-gallery2" title="lightbox view">perspiciatis unde omnis</a></h4>
                            <p><a href="#">category 1</a> , <a href="#">category 3</a>
                            </p>
                        </div>
                    </div>
                </div>

                <!--portfolio carousel-->

            </div>
        </div>
    </div>
</div>

Here one special note when i use the default code in developer option elements there is a html tree which is changed when i use *ngfor loop it effects html tree.

and this is script

$("#portfolio-carousel").owlCarousel({
                autoPlay: 3000, //Set AutoPlay to 3 seconds
                items: 3,
                itemsDesktop: [1199, 3],
                itemsDesktopSmall: [979, 3],
                navigation: true,
                pagination: false,
                navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                loop:true
            });

Answer 1

I too faced a similar issue.
The solution was to apply ngx-owl-carousel-o (Compatibility above Angular 6).
The transfer of asynchronous data to the carousel is performed through the template directive.
You can refer ngx-owl-carousel-o.
And you can view the live example via stackblitz.

Answer 2

I have the same error now it work 1000%

setTimeout(function(){ 
$('.blog-slides').owlCarousel({
    loop: true,
    nav: true,
    dots: true,
    autoplayHoverPause: true,
    autoplay: true,
    margin: 30,
    navText: [
        "<i class='bx bx-chevron-left'></i>",
        "<i class='bx bx-chevron-right'></i>"
    ],
    responsive: {
        0: {
            items: 1,
        },
        576: {
            items: 1,
        },
        768: {
            items: 2,
        },
        992: {
            items: 3,
        }
    }
});

}, 2000);