docs: improve multi-select-all example (#297)

fixes #296
bithost-gmbh · Jan 14, 2021 · 38a93b3 · 38a93b3
1 parent e35b16f
commit 38a93b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/...ultiple-selection-select-all-example/multiple-selection-select-all-example.component.html b/...ultiple-selection-select-all-example/multiple-selection-select-all-example.component.html
@@ -4,7 +4,11 @@ <h3>Multiple selection with Select All Checkbox</h3>
   <mat-form-field color="accent">
     <mat-select [formControl]="bankMultiCtrl" placeholder="Banks" [multiple]="true" #multiSelect>
       <mat-option>
-        <ngx-mat-select-search [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)" [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
+        <ngx-mat-select-search [showToggleAllCheckbox]="true"
+                               [toggleAllCheckboxIndeterminate]="bankMultiCtrl.value.length > 0 && bankMultiCtrl.value.length < allBanksSize"
+                               [toggleAllCheckboxChecked]="bankMultiCtrl.value.length === allBanksSize"
+                               (toggleAll)="toggleSelectAll($event)"
+                               [formControl]="bankMultiFilterCtrl"></ngx-mat-select-search>
       </mat-option>
       <mat-option *ngFor="let bank of filteredBanksMulti | async" [value]="bank">
         {{bank.name}}

diff --git a/...-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts b/...-multiple-selection-select-all-example/multiple-selection-select-all-example.component.ts
@@ -16,6 +16,9 @@ export class MultipleSelectionSelectAllExampleComponent implements OnInit, After
   /** list of banks */
   protected banks: Bank[] = BANKS;
 
+  /** total number of available entries */
+  public allBanksSize = BANKS.length;
+
   /** control for the selected bank for multi-selection */
   public bankMultiCtrl: FormControl = new FormControl();