Carousel doesn't use 'responsiveOptions' on init

[adudzisz]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-6dh6gj-8br5fm

Current behavior
On initialization Carousel is using values provided in html: numVisible & numScroll to calculate eg. number of pages.

Expected behavior
On initialization Carousel should use values provided in html: numVisible & numScroll & responsiveOptions to calculate eg. number of pages.

Minimal reproduction of the problem with instructions

1. Go to https://stackblitz.com/edit/github-6dh6gj-8br5fm
2. Change browser panel (right panel) width to eg. 250px.
3. Refresh browser panel
4. Carousel display one element (correct) but shows that there is only one page (error), right arrow doesn't work (error)

If you change panel width again (1px would be enough), number of pages will change to 9 (correct, 9 should be visible from the begining as it's defined in responsiveOptions).

Walkaround
I case if anyone had the same problem, here is walkaround - delay calculatePosition, to be executed when whole html is initialized, so it can enter into if which contains whole function's body (and what's most important in this case - recalculate numVisible).

  private installCarouselFix() {
    const calculatePosition: Function = Carousel.prototype.calculatePosition;
    Carousel.prototype.calculatePosition = function (this: Carousel) {
      setTimeout(() => {
        calculatePosition.call(this);
      }, 0);
    };
  }

What is the motivation / use case for changing the behavior?
Carousel should be correctly initialized with data matching current resolution, not using default values provided in html.

• Angular version: 9.1.0

• PrimeNG version: 9.0.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All browsers, tested on Chrome 81 and FF.

[tiagomartins91]

Could be related to #8705 #8739

[agugan]

I also have the same issue. My walkaround is to dispatch 'resize' event. As I thought browser resize event was not happening when we simulate the responsiveness.

  this.ngZone.runOutsideAngular(() => {
                        setTimeout(
                            () => window.dispatchEvent(new Event("resize")),
                            30
                        );
                    });

After looking at the above solution also fixes it. Thanks @adudzisz

[micobarac]

I am experiencing the same issue with 11.0.0-rc.1 version of carousel. Initial responsiveOptions values are not taken into account when calculating the the initial total number of dots.

[yigitfindikli]

Fixed in 34ba98d