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?