ngx-owl-carousel-o reponsive not working, possible solution force reloading

Question

I have the following problem: ngx-owl-carousel-o adjusts its width perfectly on first load, both widescreen and mobile. The problem is when on your PC try to resize the window, the carousel doesn't adjust its size.

I tried to force component's reloading using ChangeDetectorRef on windows resize but it doesn't work.

Client/src/app/_components/home/carousel/carousel.component.html

<div (resized)="onResize($event)">
    <owl-carousel-o class="carousel-mas-vino" [options]="carouselOptions">
        <ng-container *ngFor="let banner of banners; let id = index" [attr.data-index]="id">
            <ng-template carouselSlide [id]="id">
                <div class="row">
                    <div class="col-md-6 col-lg-4 p-5 p-sm-0 order-1 order-md-0 {{ banner.getBackgroundCSSClass() }}">
                        <div class="container slide-h-min p-2 p-sm-5 pt-md-4 p-md-6 p-lg-6 p-xl-6">
                            <p class="slide-title">{{ banner.getTitle() }}</p>
                            <p class="slide-text">{{ banner.getDescription() }}</p>
                            <p class="position-absolute fixed-bottom ml-2 pl-5 ml-md-0 pl-md-5 pb-md-1 pb-lg-4 ml-lg-4">
                                <a class="btn-slide {{ banner.getButtonCSSClass() }}"><i class="fas fa-angle-right"></i></a>
                                <span class="slide-text-2 {{ banner.getTextCSSClass() }}">{{ banner.getDuration() }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-8 p-0 order-0 order-md-1">
                        <img [src]="banner.getImg()" class="d-block w-100">
                    </div>
                </div>
            </ng-template>
        </ng-container>
    </owl-carousel-o>
</div>

Client/src/app/_components/home/carousel/carousel.component.ts

import { Component, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { ResizedEvent } from 'angular-resize-event';

import Banner from '../../../_models/Banner';


@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CarouselComponent {

  public banners: Banner[];

  public carouselOptions: OwlOptions = {
    items: 1,
    margin: 15,
    animateOut: 'fadeOut',
    dots: true,
    loop: true,
    stagePadding: 0,
    nav: true,
    autoWidth: true,
    autoHeight: true,
    navText: [
      '<i class="fas fa-chevron-left"></i>',
      '<i class="fas fa-chevron-right"></i>'
    ],
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true
  }

  constructor(private cdr: ChangeDetectorRef) {
    this.banners = [
      new Banner('La Penúltima Copa', 'El vino está hecho de celebraciones compartidas. Acompaña las andanzas de un turista por degustaciones, ferias y festivales. Descubre si es verdad que todos somos mortales hasta el primer beso y la segunda copa.', '/assets/images/slide1.jpg', '4 CAPÍTULOS DE 5 MINUTOS', 'bg-slide-1', 'btn-slide-1'),
      new Banner('Zoowine', 'La flora y la fauna pueden ser grandes aliadas en el cultivo de las viñas. Para lograr exquisitos vinos se prioriza el equilibrio de todo el ecosistema. Déjate cautivar con las prácticas de una agricultura sostenible.', '/assets/images/slide2.jpg', '6 CAPÍTULOS DE 1 MINUTOS', 'bg-slide-2', 'btn-slide-2', 'text-white'),
      new Banner('1 Minuto x Sabor', 'El vino gana cada vez más terreno en el mundo de la coctelería. De la mano de una barwoman o un bartender descubre maneras creativas de mezclar aromas y sabores. Diviértete probando tragos irresistibles.', '/assets/images/slide3.jpg', '6 CAPÍTULOS DE 1 MINUTO', 'bg-slide-3', 'btn-slide-3', 'text-rojo')
    ]
  }

  public onResize(event: ResizedEvent) {
    this.cdr.markForCheck();
  }
}

Client/src/app/_components/home/home.component.html

<app-navigation></app-navigation>

<app-carousel></app-carousel>

<!-- Estrenos -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="estrenos-title">Estrenos<i class="icofont-popcorn icofont-2x"></i></h4>
</div>
<div class="owl-content" id="estrenos">
    <div id="carousel-estrenos" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapenultimagrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La penúltima copa</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/malamadotonicadentro.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Malamado Tonic</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/cassdevinogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Casas del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/rep.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Rep y el vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lasovejasdekaiken.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Las ovejas de Kaiken</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="estrenos-nav owl-nav"></div>
        </div>
    </div>
</div>
<!-- Lo más visto -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="lo-mas-visto-title">Lo más visto <i class="fas fa-eye"></i></h4>
</div>
<div class="owl-content" id="lo-mas-visto">
    <div id="carousel-lo-mas-visto" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapeatonaldelvino.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La peatonal del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/elcarruseldelasreinas.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">El carrusel de las reinas</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/aperol.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Aperol Spritz</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/malbecsour.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Malbec Sour</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/diamandes.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Bodega Diamandes, Tunuyán</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="lo-mas-visto-nav owl-nav"></div>
        </div>
    </div>
</div>
<!-- Explorar -->
<div class="container-fluid pl-5 pt-3">
    <h4 class="explorar-todo-title">Explorar todo <i class="fas fa-search"></i></h4>
</div>
<div class="owl-content" id="explorar-todo">
    <div id="carousel-explorar-todo" class="owl-carousel owl-theme">
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/cassdevinogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Casas del vino</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/zoowinegrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Zoowine</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/1minutogrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Un minuto por sabor</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/mas_vino_img.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">El ingrediente clave</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/lapenultimagrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">La penúltima copa</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/entrevistasgrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Entre Vistas</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a href="playlist.html">
                <img src="/assets/images/explorar_todo/playgrilla.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Play para degustar</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
        <div class="item grow content-item">
            <a routerLink="/ver">
                <img src="/assets/images/explorar_todo/mas_vino_img.jpg">
                <span class="item-overlay">
                    <span class="item-overlay-content">
                        <p class="text">
                            <span class="title">Wine Soul</span>
                        </p>
                    </span>
                </span>
            </a>
        </div>
    </div>
    <div class="owl-theme">
        <div class="owl-controls">
            <div class="explorar-todo-nav owl-nav"></div>
        </div>
    </div>
</div>
<div class="container-fluid pl-5 pt-3 pb-2">
    <h4 class="explorar-todo-title">En vivo <i class="fas fa-tv"></i></h4>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col text-center">
            <div class="container-fluid live-container" id="en-vivo">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/3Q28f_-fRSA?controls=0"
                    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>
</div>

On first load on widescreen, it looks like this:

On first load on mobile:

Resized from widescreen to mobile:

Resized from mobile to widescreen:

Answer 1

In Component.ts

SlideOptions = {
items: 10, autoplay: true, loop: true, dots: false,
responsive: {
  0: {
    items: 1
  },

  600: {
    items: 3
  },
  960: {
    items: 5
  },
  1200: {
    items: 6
  },
  1300: {
    items: 10
  }
},
};

Answer 2

You need to add a responsive option in your object OwlOptions. additional to that, I suggest placing the initialization of the options within the method OnInit, because sometimes rendering on small devices usually fails. See my code:

Component.ts

    customOptions: OwlOptions;

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.customOptions = {
        loop: true,
        mouseDrag: true,
        touchDrag: true,
        pullDrag: true,
        dots: true,
        navSpeed: 700,
        navText: ['<img src="../assets/images/leftArrow.png" width="20">', '<img src="../assets/images/rightArrow.png" width="20">'],
        responsive: {
          0: {
            items: 1
          }
        },
        nav: true
      }
    }, 300);

  }

Component.html

<div class="body ratings" *ngIf="customOptions">
        <owl-carousel-o [options]="customOptions">
            <ng-template carouselSlide>

....