After attempting to import data from JSON and display it using ngu-carousel, I encountered an error.
The error shows "length of undefined"
Subsequently, when I try to click on the previous/next button, another error appears.
This error states "innerHTML of undefined"
Below is a snippet of my code:
gallery.component.ts
import { Component, OnInit } from "@angular/core";
import { NguCarouselConfig } from "@ngu/carousel";
import { ShopService } from "../shop.service";
@Component ({ selector: "app-gallery", templateUrl: "./gallery.component.html" })
export class GalleryComponent implements OnInit {
public product: any;
public carouselImg: NguCarouselConfig = {
grid: { xs: 1, sm: 2, md: 3, lg: 3, all: 0 },
slide: 1,
loop: true,
speed: 250,
point: {
visible: true,
},
load: 2,
velocity: 0,
touch: true,
};
constructor (private sv: ShopService) {};
ngOnInit () {
this.sv.getProducts().subscribe(data => {
this.product = data;
});
};
}
gallery.component.html
<ngu-carousel #imgCarousel [inputs]="carouselImg" [dataSource]="product">
<ngu-tile *nguCarouselDef="let item">
<mat-card>
<mat-card-header>
<mat-card-title>{{item.name}}</mat-card-title>
</mat-card-header>
<img mat-card-image [src]="item.photo" alt="">
<mat-card-content>
<p>
{{item.remark}} <span><a href="">More info</a></span>
</p>
</mat-card-content>
</mat-card>
</ngu-tile>
<button NguCarouselPrev class="leftRs"><</button>
<button NguCarouselNext class="rightRs">></button>
</ngu-carousel>
I am unsure of what is causing the issue in my code. Any assistance would be greatly appreciated :)