File
projects/congarevenuecloud/elements/src/lib/select-all/select-all.component.ts
Description
The select all component is used for selecting all the products/cart items and adding them to the drawer.
Preview
Usage
Example :import { SelectAllModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [SelectAllModule, ...]
})
export class AppModule {}```typescript
<apt-select-all
[items]="items"
></apt-select-all>
Implements
OnChanges
OnDestroy
Metadata
| selector | apt-select-all |
| styleUrls | ./select-all.component.scss |
| templateUrl | ./select-all.component.html |
Index
Properties |
Methods |
Inputs |
Constructor
constructor(batchSelectionService: BatchSelectionService)
|
||||||
|
Parameters :
|
Inputs
| items |
Type : Array<Product | CartItem>
|
Default value : []
|
|
The array of selected products of type Product or Cart Item |
| showLabel |
Type : boolean
|
Default value : true
|
|
Boolean flag indicating whether to display the 'Select All' label for the checkbox or not. |
Methods
| toggleAllItems | ||||||||
toggleAllItems(items: Array<Product> | Array<CartItem> | Array<ItemRequest>)
|
||||||||
|
Toggles the selection state of all items based on their type and current selection state.
Parameters :
Returns :
void
|
Properties
| selectionState |
Type : string
|
Default value : SelectionState.UNCHECKED
|
|
Determine the selection state of the checkbox |
<div class="custom-control custom-checkbox d-flex align-items-center" *ngIf="items.length > 1">
<input type="checkbox" class="custom-control-input" [id]="'select-all-' + type"
[indeterminate]="selectionState === 'indeterminate'"
[checked]="selectionState === 'checked'" (click)="toggleAllItems(items)">
<label class="custom-control-label pt-1" [for]="'select-all-' + type"><span class="d-lg-inline-flex d-md-inline-flex" [class.d-sm-none]="!showLabel" [class.d-none]="!showLabel">{{'COMMON.SELECT_ALL' |
translate}}</span></label>
</div>
./select-all.component.scss
Legend
Html element
Component
Html element with directive