13.5.0 avoid duplicate data load

browserslist

@@ -1,9 +1,18 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
-# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
-> 0.5%
-last 2 versions
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not dead
-# IE 9-11
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

package.json

@@ -13,33 +13,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.0.3",
-    "@angular/cdk": "^13.0.3",
-    "@angular/common": "^13.0.3",
-    "@angular/compiler": "^13.0.3",
-    "@angular/core": "^13.0.3",
-    "@angular/flex-layout": "^13.0.0-beta.36",
-    "@angular/forms": "^13.0.3",
-    "@angular/material": "^13.0.3",
-    "@angular/platform-browser": "^13.0.3",
-    "@angular/platform-browser-dynamic": "^13.0.3",
-    "@angular/router": "^13.0.3",
+    "@angular/animations": "^13.3.2",
+    "@angular/cdk": "^13.3.2",
+    "@angular/common": "^13.3.2",
+    "@angular/compiler": "^13.3.2",
+    "@angular/core": "^13.3.2",
+    "@angular/flex-layout": "^13.0.0-beta.38",
+    "@angular/forms": "^13.3.2",
+    "@angular/material": "^13.3.2",
+    "@angular/platform-browser": "^13.3.2",
+    "@angular/platform-browser-dynamic": "^13.3.2",
+    "@angular/router": "^13.3.2",
     "ngx-highlightjs": "^6.1.0",
     "rxjs": "^6.5.4",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^13.0.3",
-    "@angular-devkit/build-angular": "~13.0.4",
+    "@angular/compiler-cli": "^13.3.2",
+    "@angular-devkit/build-angular": "~13.3.2",
     "typescript": "~4.4.4",
-    "@angular/cli": "~13.0.4",
-    "@angular/language-service": "^13.0.3",
+    "@angular/cli": "~13.3.2",
+    "@angular/language-service": "^13.3.2",
     "@types/jasmine": "~3.10.2",
     "@types/jasminewd2": "~2.0.10",
     "@types/node": "^12.11.1",
     "ng-packagr": "^13.0.8",
-    "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.3.9",

projects/simplemattable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplemattable",
-  "version": "13.4.0",
+  "version": "13.5.0",
   "description": "A simplified, declarative table-library using @angular/material's MatTable with form capabilities for adding/editing/deleting data",
   "author": "Henning Wobken",
   "license": "MIT",

projects/simplemattable/src/lib/simplemattable/simplemattable.component.ts

@@ -368,6 +368,13 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
   rowStyleMap = new Map<T, Object>();
   rowClassMap = new Map<T, string | string[] | Object>();
 
+  /**
+   * NgDoCheck is directly called after every ngOnChanges
+   * This flag allows us to know in ngDoCheck if a data change
+   * was already done in ngOnChanges to avoid duplicate processing
+   */
+  onChangesDetectedDataChange: boolean = false;
+
   constructor(
     private fb: FormBuilder,
   ) {
@@ -945,6 +952,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
     if (changes.data) {
       this.onDataChanges();
     }
+    this.onChangesDetectedDataChange = !!changes.data;
     if (changes.pageSettings && this.pageSettings) {
       // When using pagination, the user can programmatically select a page and the page size
       // via the page settings object. The paginator selections are changed here.
@@ -1067,10 +1075,17 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
       this.clearCssCache();
       this.clearAddedEntry();
       this.turnOffSorting(); // If columns are changed, resorting might cause bugs
-      this.recreateDataSource();
+      // data might have been updated after data change in ngOnChanges
+      // and that call included the changed table columns already
+      if (!this.onChangesDetectedDataChange) {
+        this.recreateDataSource();
+      }
       this.cleanUpAfterColChange();
       this.recreateColFilters();
     }
+    if (this.onChangesDetectedDataChange) {
+      this.onChangesDetectedDataChange = false;
+    }
   }
 
   private recreateColFilters() {
@@ -1130,11 +1145,7 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
 
   private recreateDataSource() {
     if (this.columns && this.data) {
-      const tmpData = this.data.slice();
-      if (this.addedItem) {
-        tmpData.unshift(this.addedItem);
-      }
-      this.dataSource = new MatTableDataSource(tmpData);
+      this.dataSource = new MatTableDataSource() as MatTableDataSource<T>;
 
       // Listen to data changes
       if (this.renderedDataSubscription) {
@@ -1213,6 +1224,23 @@ export class SimplemattableComponent<T> implements OnInit, DoCheck, OnChanges, A
         };
       }
 
+      const tmpData = this.data.slice();
+      if (this.addedItem) {
+        tmpData.unshift(this.addedItem);
+      }
+
+      if (this.paginator && !this.matFrontendPaginator && !this.matBackendPaginator) {
+        // Paginator might not be assigned yet
+        // If that is the case, we need to move setting the data to a point
+        // where the paginator is set on the datasource (usually after view init)
+        // see also https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows
+        setTimeout(() => {
+          this.dataSource.data = tmpData;
+        });
+      } else {
+        this.dataSource.data = tmpData;
+      }
+
       // Filter columns to display and footer-detection
       this.columnIds.clear();
       let hasFooter = false; // we only want to display the footer if a visible column has the footer function