File
projects/congarevenuecloud/elements/src/lib/filter/facet-filter/facet-filter.component.ts
Description
Facet filter component is a way to show the list of facets available for the given category.
Preview
Usage
Example :import { FilterModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [FilterModule, ...]
})
export class AppModule {}// Usage
```typescript
<apt-facet-filter
[facet]="data?.Facets"
[record]="product"
(userSelection)="getFacetFilterSelection($event)">
</apt-facet-filter>
Implements
OnInit
OnChanges
Metadata
| selector | apt-facet-filter |
| styleUrls | ./facet-filter.component.scss |
| templateUrl | ./facet-filter.component.html |
Index
Methods |
Inputs |
Outputs |
Constructor
constructor()
|
Inputs
| facet |
Type : Array<FacetFilter>
|
Default value : []
|
|
List of facet. |
| record |
Type : AObject
|
|
Instance of AObject. |
Outputs
| userSelection |
Type : EventEmitter<Array<FacetFilter>>
|
|
List of selected facet |
Methods
| updateFacetSelection | ||||||||||||
updateFacetSelection(fieldName: string, value: string)
|
||||||||||||
|
The method responsible to fetch the user selected facet and its values. It emits this.userSelection to the calling componnet.
Parameters :
Returns :
void
|
<div *ngIf="facetList$ | async as facets">
<div class="card mb-2" *ngFor="let item of facets">
<div class="card-body">
<apt-input-field [(ngModel)]="record[item?.Name]" [field]="item?.Name" [entity]="record"
(ngModelChange)="updateFacetSelection(item?.Name, [record[item?.Name]])" [displayFieldType]="'dropdown'"
[labelClass]="'h3 card-title font-weight-light text-break'" [presetBoolean]="true"
[presetBooleanLabel]="'COMMON.SHOW_ALL' | translate"></apt-input-field>
</div>
</div>
</div>
./facet-filter.component.scss
Legend
Html element
Component
Html element with directive