I am working on a straightforward project using Angular and Primeng 16.
Currently, I have implemented a carousel, and everything seems to be working fine. However, when I try to navigate using the next or prev buttons, the information does not load.
I have made sure to include all necessary style dependencies in the styles section of my Angular.json:
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeflex/primeflex.min.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.scss"
],
Below is an example of the code structure:
HTML File:
<div class="card">
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false"
[responsiveOptions]="responsiveOptions">
<ng-template let-product pTemplate="item">
<h4 class="mb-1">{{ product.name }}</h4>
</ng-template>
</p-carousel>
</div>
TypeScript File:
products : any[] | undefined;
responsiveOptions: any[] | undefined;
ngOnInit() {
this.responsiveOptions = [
{
breakpoint: '1199px',
numVisible: 1,
numScroll: 1
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 1
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
];
this.products = [
{name : 7},
{name : 8},
{name : 9},
{name : 0},
{name : 1},
{name : 2},
{name : 3}
]
}