Fixed state change of "Select all" checkbox in attributes table

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -142,7 +142,7 @@
         <ng-container matColumnDef="select" sticky>
           <mat-header-cell *matHeaderCellDef style="width: 40px;">
             <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
-                          [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
+                          [(ngModel)]="selectAllModel"
                           [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
             </mat-checkbox>
           </mat-header-cell>

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -40,7 +40,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { forkJoin, merge, Observable, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import { EntityId } from '@shared/models/id/entity-id';
 import {
   AttributeData,
@@ -187,6 +187,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   textSearch = this.fb.control('', {nonNullable: true});
 
   private destroy$ = new Subject<void>();
+  selectAllModel: boolean = false;
 
   constructor(protected store: Store<AppState>,
               private attributeService: AttributeService,
@@ -223,6 +224,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
       });
     });
     this.widgetResize$.observe(this.elementRef.nativeElement);
+
+    this.dataSource.selection.changed.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      this.dataSource.isAllSelected().pipe(take(1)).subscribe(allSelected => {
+        this.selectAllModel = allSelected;
+      });
+    });
   }
 
   ngOnDestroy() {
@@ -237,6 +246,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     this.attributeScope = attributeScope;
     this.mode = 'default';
     this.paginator.pageIndex = 0;
+    this.selectAllModel = false;
     this.updateData(true);
   }
 

ui-ngx/src/app/modules/home/models/datasource/attribute-datasource.ts

@@ -115,9 +115,11 @@ export class AttributeDatasource implements DataSource<AttributeData> {
   }
 
   isAllSelected(): Observable<boolean> {
-    const numSelected = this.selection.selected.length;
     return this.attributesSubject.pipe(
-      map((attributes) => numSelected === attributes.length)
+      map((attributes) => {
+        const numSelected = this.selection.selected.length;
+        return attributes.length > 0 && numSelected === attributes.length
+      })
     );
   }