File
projects/congarevenuecloud/elements/src/lib/filter/category-filter/category-filter.component.ts
Description
Category filter component is a way to show the related categories and subcategories for a given product category.
Preview
Usage
Example :import { FilterModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [FilterModule, ...]
})
export class AppModule {}// Basic Usage
```typescript
<apt-category-filter
[category]="category"
(onChange)="handleCategoryChange($event)"
></apt-category-filter>// Setting multiselection on peer categories with a custom limit and title.
```typescript
<apt-category-filter
[category]="category"
selection="multi"
relationship="peers"
limit="15"
title="Similar Categories"
(onChange)="handleCategoryChange($event)"
></apt-category-filter>
Implements
OnChanges
Metadata
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | apt-category-filter |
| styleUrls | ./category-filter.component.scss |
| templateUrl | ./category-filter.component.html |
Index
Inputs |
Outputs |
Constructor
constructor(categoryService: CategoryService, translateService: TranslateService)
|
|||||||||
|
Parameters :
|
Inputs
| category |
Type : string | Category
|
|
Represents the product category object or Id of the category. |
| limit |
Type : number
|
Default value : 10
|
|
Maximum number of categories to display. |
| relationship |
Type : "children" | "peers"
|
Default value : 'children'
|
|
The relationship the displayed categories should have to the main category. |
| selection |
Type : "single" | "multi"
|
Default value : 'single'
|
|
Respresents the list of categories for 'multiple' selection or single selection. |
| title |
Type : string
|
Default value : (this.relationship === 'children') ? String(this.getTranslatedTitle('COMMON.SUB_CATEGORIES')) : String(this.getTranslatedTitle('FILTER.CATEGORIES'))
|
|
Title to display on the card for this component. |
Outputs
| onChange |
Type : EventEmitter<Array<Category>>
|
|
Event emitter for when the value of this component changes. |
<div class="card category-list-container" *ngIf="categoryList$ | async as categoryList">
<div class="card-body">
<h5 class="card-title">{{title}}</h5>
<form *ngIf="selection === 'multi'" [formGroup]="filterGroup">
<ul class="list-unstyled pl-2">
<li *ngFor="let category of categoryList" class="custom-control custom-checkbox py-1">
<input type="checkbox" class="custom-control-input" [id]="category.Id" [formControlName]="category.Id"
(change)="onCheckChange($event)" [name]="category.Id">
<label class="custom-control-label" [for]="category.Id">{{category.Label}}</label>
</li>
</ul>
</form>
<ul class="list-unstyled" *ngIf="selection === 'single'">
<li *ngFor="let category of categoryList" [class.active]="category.Id == categoryId">
<a href="javascript:void(0)" class="btn btn-link btn-sm py-1 text-left"
[class.disabled]="category.Id === categoryId" (click)="onChange.emit([category])">{{category.Label}}</a>
</li>
</ul>
</div>
</div>
./category-filter.component.scss
:host {
display: block;
}
li {
font-size: smaller;
line-height: 24px;
}
Legend
Html element
Component
Html element with directive