File
projects/congarevenuecloud/elements/src/lib/product-carousel/product-carousel.component.ts
Description
The Product carousel component is a carousel to display the list of products based on the categories which is populated from the selected price list. The user can slide and view the products listed in the carousel. When user clicks on any product it launches product detail page of the product selelcted.
Preview
Usage
Example :import { ProductCarouselModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [ProductCarouselModule, ...]
})
export class AppModule {}// Basic Usage
```typescript
<apt-product-carousel [productList]="products"></apt-product-carousel>// All inputs and outputs.
```typescript
<apt-product-carousel
[productList]="products"
[dots]="showingDots"
[slides]="numberOfSlides"
[draggable]="isDraggable"
[leftAlign]="isLeftAlign"
[title]="title"
[subtitle]="subtitle"
></apt-product-carousel>
Implements
OnChanges
Metadata
| changeDetection | ChangeDetectionStrategy.OnPush |
| encapsulation | ViewEncapsulation.None |
| selector | apt-product-carousel |
| styleUrls | ./product-carousel.component.scss |
| templateUrl | ./product-carousel.component.html |
Index
Inputs |
Constructor
constructor()
|
Inputs
| cartItemList |
Type : Array<CartItem>
|
|
List of cart items |
| dots |
Type : boolean
|
Default value : true
|
|
Show the dots in carousel |
| draggable |
Type : boolean
|
Default value : true
|
|
Allow drags in carousel |
| leftAlign |
Type : boolean
|
Default value : true
|
|
Set carousel alignment to left. |
| productList |
Type : Array<ItemRequest>
|
|
List of products |
| readonly |
Type : boolean
|
Default value : false
|
|
Flag to set product card type as read only or not. |
| showCategory |
Type : boolean
|
Default value : true
|
|
Flag to show category name on the product card. |
| showCode |
Type : boolean
|
Default value : true
|
|
Flag to show product code on the product card. |
| showQty |
Type : boolean
|
Default value : false
|
|
Flag to show quantity on the product card. |
| slides |
Type : number
|
Default value : 4
|
|
Set the slide count in carousel |
| subtitle |
Type : string
|
|
The sub title to show on the carousel. |
| title |
Type : string
|
|
The title to show on the carousel. |
<div *ngIf="productList?.length > 0">
<h3 class="mt-4" [innerHTML]="title" *ngIf="title"></h3>
<p [innerHTML]="subtitle" *ngIf="subtitle"></p>
<carousel [itemsPerSlide]="slides" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-lg-block d-md-none d-sm-none d-none">
<slide *ngFor="let list of productList; trackBy: trackById">
<apt-product-card [product]="list.Product" [quantity]="list.Quantity" class="d-block mr-2 ml-2" *ngIf="list?.Id" [type]="cardType"
[showCategory]="showCategory" [showCode]="showCode" [showQty]="showQty"></apt-product-card>
</slide>
</carousel>
<carousel [itemsPerSlide]="2" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-sm-block d-md-block d-lg-none d-none">
<slide *ngFor="let list of productList; trackBy: trackById">
<apt-product-card [product]="list.Product" [quantity]="list.Quantity" class="d-block mr-2 ml-2" *ngIf="list?.Id" [type]="cardType"
[showCategory]="showCategory" [showCode]="showCode" [showQty]="showQty"></apt-product-card>
</slide>
</carousel>
<carousel [itemsPerSlide]="1" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-md-none d-lg-none d-sm-none d-block">
<slide *ngFor="let list of productList; trackBy: trackById">
<apt-product-card [product]="list.Product" [quantity]="list.Quantity" class="d-block mr-2 ml-2" *ngIf="list?.Id" [type]="cardType"
[showCategory]="showCategory" [showCode]="showCode" [showQty]="showQty"></apt-product-card>
</slide>
</carousel>
</div>
<div *ngIf="cartItemList?.length > 0">
<h3 class="mt-5" [innerHTML]="title" *ngIf="title"></h3>
<p [innerHTML]="subtitle" *ngIf="subtitle"></p>
<carousel [itemsPerSlide]="slides" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-lg-block d-md-none d-sm-none d-none">
<slide *ngFor="let cartItem of cartItemList; trackBy: trackById">
<apt-lineitem-card [lineItem]="cartItem" class="d-block mr-2 ml-2" *ngIf="cartItem?.Id"></apt-lineitem-card>
</slide>
</carousel>
<carousel [itemsPerSlide]="2" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-sm-block d-md-block d-lg-none d-none">
<slide *ngFor="let cartItem of cartItemList; trackBy: trackById">
<apt-lineitem-card [lineItem]="cartItem" class="d-block mr-2 ml-2" *ngIf="cartItem?.Id"></apt-lineitem-card>
</slide>
</carousel>
<carousel [itemsPerSlide]="1" [interval]="0" [indicatorsByChunk]="true" [showIndicators]="false"
class="d-md-none d-lg-none d-sm-none d-block">
<slide *ngFor="let cartItem of cartItemList; trackBy: trackById">
<apt-lineitem-card [lineItem]="cartItem" class="d-block mr-2 ml-2" *ngIf="cartItem?.Id"></apt-lineitem-card>
</slide>
</carousel>
</div>
./product-carousel.component.scss
apt-product-carousel {
.carousel.slide {
padding: 0 1.5rem;
&:focus {
outline: none;
}
.carousel-inner {
overflow: initial;
display: block;
}
.carousel-indicators li {
box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
background-color: rgba(70, 70, 70, 0.25);
width: 10px;
height: 10px;
border-radius: 100%;
&.active {
background-color: black;
}
}
slide.item.carousel-item {
perspective: inherit;
-webkit-perspective: inherit;
animation-duration: 1s;
animation-fill-mode: both;
margin-right: inherit;
padding: 0 0.25rem;
}
.carousel-control{
display: block;
background: rgba(0, 0, 0, 0.4);
top: 46%;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
line-height: 1.5rem;
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 10px;
width: 10px;
}
}
}
Legend
Html element
Component
Html element with directive