reset page sort and filter on addBike

src/app/pages/tables/bikes/bikes.component.html

@@ -24,9 +24,9 @@
       <mat-label>Filter</mat-label>
       <input
         matInput
-        (keyup)="applyFilter($event)"
+        [(ngModel)]="filterValue"
+        (input)="applyFilter()"
         placeholder="Suchbegriff eingeben..."
-        #input
       />
     </mat-form-field>
     <mat-paginator
@@ -157,20 +157,14 @@
           </div>
         </td>
       </ng-container>
-
+   
-      <mat-spinner
-      [diameter]="32"
-      *ngIf="!isLoaded"
-    ></mat-spinner>
-     
-
       <!-- Table Definition -->
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
 
     <mat-card *ngIf="!isLoaded" style="display: flex; justify-content: center; align-items: center">
-      <mat-spinner [diameter]="320"></mat-spinner>
+      <mat-spinner [diameter]="32"></mat-spinner>
     </mat-card>
   </div>
 </div>

src/app/pages/tables/bikes/bikes.component.ts

@@ -128,6 +128,7 @@ export class BikesComponent {
 
   relockingInterval = null;
   relockingDuration = 1000 * 60 * 1;
+  filterValue: string = "";
   isLoaded = false;
 
   constructor(
@@ -261,6 +262,9 @@ export class BikesComponent {
   }
 
   addEmptyRow() {
+    this.paginator.firstPage();
+    this.resetFilter();
+    this.resetSorting();
     this.data.data = [{ newObject: true }, ...this.data.data];
   }
 
@@ -314,8 +318,16 @@ export class BikesComponent {
       : this.data.data.forEach((row) => this.selection.select(row));
   }
 
-  applyFilter(event: Event) {
+  applyFilter() {
-    const filterValue = (event.target as HTMLInputElement).value;
+    this.data.filter = this.filterValue.trim().toLowerCase();
-    this.data.filter = filterValue.trim().toLowerCase();
+  }
+
+  resetFilter() {
+    this.filterValue = "";
+    this.applyFilter();
+  }
+
+  resetSorting() {
+    this.sort.sort({id: null, start: 'asc', disableClear: false });
   }
 }