PrimeNG - Capture the numVisible property from a carousel in a typescript variable

Viewed 210

I have this carousel:

 <p-carousel *ngIf="carousel && tarjetasTP.length" [value]="tarjetasTP"
                                styleClass="custom-carousel" [numVisible]="5" [numScroll]="1" [circular]="true"
                                [responsiveOptions]="responsiveOptions">

                                <ng-template let-tar pTemplate="item">

                                    <div class="card">
                                        <div class="product-grid-item-top">

                                            <div>
                                                <span class="product-category">{{tar.familia}}</span>
                                            </div>
                                        </div>
                                        <div class="product-grid-item-content">
                                            <div class="product-name product-name-total">Total </div>
                                        </div>
                                        <div class="product-grid-item-content" *ngFor="let item of tar.itemsTarjeta">

                                            <div class="product-name"> {{item.cantidad}} {{item.unidad}} </div>
                                        </div>

                                    </div>
                                </ng-template>
                            </p-carousel>

And i have these responsive options:

  this.responsiveOptions = [
            {
                breakpoint: '1024px',
                numVisible: 3,
                numScroll: 3
            },
            {
                breakpoint: '810px',
                numVisible: 2,
                numScroll: 2
            },
            {
                breakpoint: '560px',
                numVisible: 1,
                numScroll: 1
            }
        ];

If the horizontal resolution is bigger than any of the responsive options available, then the numVisible property is set to 5 by default.

Is it possible to capture the numVisible propery inside a variable?

Like, i would like to be able to do something like this for example:

Console.Log(numVisible);

Also, is it possible to know which of the responsive options is active when im using my app? If i enter with a mobile device then i know numVisible wouldnt be 5 anymore, but how does the carousel know which responsive option it should pick?

0 Answers
Related