I've an application where I've to load NgxSlickCarousel in a lot of places. Therefore I've thought to create a reusable component that handles all the slick carousel functionality while i can pass content into it.
My app-slick-content component looks something like this.
<ngx-slick-carousel
class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
>
<ng-content></ng-content>
</ngx-slick-carousel>
Where ng-content is the content I will pass from the parent component. In this particular example, I'm passing the following content.
<app-slick-content>
<div class="row mt-2">
<div
*ngFor="let slide of products"
ngxSlickItem <!-- This throws an error -->
class="col-md-4 col-xs-12 mt-2 ml-2 slick-item"
>
<div class="d-flex flex-column rounded bg-dark-grey">
<div class="p-2 d-flex justify-content-center">
<img src="/assets/images/products/test.png" />
</div>
<hr class="border border-2 bg-dark-grey mx-4" />
<section class="d-flex flex-row mx-4">
<div class="d-flex flex-column flex-grow-1 py-2">
<p class="h2 fw-bold text-uppercase">Strawberry</p>
<p class="h5 fw-bold">400g</p>
<p class="h2 fw-bold mt-5">€12.70</p>
</div>
<div class="d-flex flex-column py-2">
<div
class="bottom d-flex flex-grow-1 justify-content-end align-items-end my-2"
>
<button
class="px-2 rounded-circle bg-primary fs-4 border border-0"
>
<fa-icon [icon]="faPlus" class="text-white"></fa-icon>
</button>
</div>
</div>
</section>
</div>
</div>
</div>
</app-slick-content>
As mentioned in the comment in above code snippet, the following error is thrown.
Could someone please help me achieve this.
