remove dependency to @angular/forms

fixes #172

CHANGELOG.md

@@ -7,6 +7,7 @@ This document lists the changes introduced by this fork.
 * Upgrade to Angular 19
 * Add new `filter.debounceTime` setting
 * Fix broken backwards compatibility with rxjs ^6.5.3
+* Remove dependency to `@angular/forms`
 
 ## Version 3.4.0
 

package.json

@@ -20,7 +20,6 @@
     "@angular/common": "~19.0.4",
     "@angular/compiler": "~19.0.4",
     "@angular/core": "~19.0.4",
-    "@angular/forms": "~19.0.4",
     "@angular/platform-browser": "~19.0.4",
     "@angular/platform-browser-dynamic": "~19.0.4",
     "@angular/router": "~19.0.4",

projects/angular2-smart-table/CHANGELOG.md

@@ -7,6 +7,7 @@ This document lists the changes introduced by this fork.
 * Upgrade to Angular 19
 * Add new `filter.debounceTime` setting
 * Fix broken backwards compatibility with rxjs ^6.5.3
+* Remove dependency to `@angular/forms`
 
 ## Version 3.4.0
 

projects/angular2-smart-table/package.json

@@ -15,7 +15,6 @@
   "peerDependencies": {
     "@angular/core": "16 - 19",
     "@angular/common": "16 - 19",
-    "@angular/forms": "16 - 19",
     "lodash-es": "^4.17.21"
   },
   "dependencies": {

projects/angular2-smart-table/src/lib/angular2-smart-table.module.ts

@@ -1,6 +1,5 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Angular2SmartTableComponent} from './angular2-smart-table.component';
 import {CellModule} from './components/cell/cell.module';
 import {FilterModule} from './components/filter/filter.module';
@@ -16,8 +15,6 @@ import {THeadModule} from './components/thead/thead.module';
   ],
   imports: [
     CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
     CellModule,
     FilterModule,
     PagerModule,

projects/angular2-smart-table/src/lib/components/cell/cell-editors/checkbox-editor.component.ts

@@ -9,7 +9,6 @@ import {CheckboxEditorSettings} from "../../../lib/settings";
     template: `
     <input [ngClass]="inputClass"
            type="checkbox"
-           class="form-control"
            [name]="cell.getId()"
            [disabled]="!cell.isEditable()"
            [checked]="cell.getValue() === trueVal"

projects/angular2-smart-table/src/lib/components/cell/cell-editors/select-editor.component.ts

@@ -7,7 +7,6 @@ import {ListEditorSettings} from "../../../lib/settings";
     selector: 'select-editor',
     template: `
     <select [ngClass]="inputClass"
-            class="form-control"
             (change)="onSelectionChanged($any($event.target).value)"
             [name]="cell.getId()"
             [disabled]="!cell.isEditable()"

projects/angular2-smart-table/src/lib/components/cell/cell.module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
 
 import {CellComponent} from './cell.component';
 import {CustomEditComponent} from './cell-edit-mode/custom-edit.component';
@@ -34,7 +33,6 @@ const CELL_COMPONENTS = [
 @NgModule({
     imports: [
         CommonModule,
-        FormsModule,
         PipesModule,
     ],
   declarations: [

projects/angular2-smart-table/src/lib/components/filter/filter-types/checkbox-filter.component.ts

@@ -1,52 +1,45 @@
 import {Component, OnInit} from '@angular/core';
-import {FormControl} from '@angular/forms';
 
 import {DefaultFilter} from './default-filter';
-import {debounceTime} from 'rxjs/operators';
 import {CheckboxFilterSettings} from "../../../lib/settings";
 
 @Component({
     selector: 'checkbox-filter',
     template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    <input type="checkbox" (change)="onChecked($any($event.target).checked)" [checked]="checked" [ngClass]="inputClass">
     <a href="#" *ngIf="filterActive" (click)="resetFilter($event)">{{resetText}}</a>
   `,
     standalone: false
 })
 export class CheckboxFilterComponent extends DefaultFilter implements OnInit {
 
   filterActive: boolean = false;
-  inputControl = new FormControl();
+  checked: boolean = false;
 
   trueVal = 'true';
   falseVal = 'false';
   resetText = 'reset';
 
-  constructor() {
-    super();
-  }
-
   ngOnInit() {
-    if (typeof this.column.filter !== "boolean" && typeof this.column.filter.config !== "undefined") {
+    if (this.column.filter.config !== undefined) {
       const config = this.column.filter.config as CheckboxFilterSettings;
       this.trueVal = config?.true ?? 'true';
       this.falseVal = config?.false ?? 'false';
       this.resetText = config?.resetText ?? 'reset';
     }
+    super.ngOnInit();
+  }
 
-    this.changesSubscription = this.inputControl.valueChanges
-      .pipe(debounceTime(this.debounceTime))
-      .subscribe((checked: boolean) => {
-        this.filterActive = true;
-        this.query = checked ? this.trueVal : this.falseVal;
-        this.setFilter();
-      });
+  onChecked(checked: boolean) {
+    this.filterActive = true;
+    this.checked = checked;
+    this.onValueChanged(checked ? this.trueVal : this.falseVal);
   }
 
   resetFilter(event: any) {
     event.preventDefault();
     this.query = '';
-    this.inputControl.setValue(false, { emitEvent: false });
+    this.checked = false;
     this.filterActive = false;
     this.setFilter();
   }

projects/angular2-smart-table/src/lib/components/filter/filter-types/default-filter.ts

@@ -1,29 +1,39 @@
-import {Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
-import {Subscription} from 'rxjs';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Subject, Subscription} from 'rxjs';
 
 import {Column} from '../../../lib/data-set/column';
+import {debounceTime, distinctUntilChanged} from "rxjs/operators";
 
 @Component({
     template: '',
     standalone: false
 })
-export class DefaultFilter implements Filter, OnDestroy {
+export class DefaultFilter implements Filter, OnInit, OnDestroy {
 
-  changesSubscription!: Subscription;
-  changesSubscription2!: Subscription;
+  subject = new Subject<string>();
+  changesSubscription?: Subscription;
   @Input() query: string = '';
   @Input() inputClass!: string;
   @Input() debounceTime: number = 300;
   @Input() column!: Column;
   @Output() filter = new EventEmitter<string>();
 
+  ngOnInit() {
+    this.changesSubscription = this.subject
+      .pipe(
+        distinctUntilChanged(),
+        debounceTime(this.debounceTime),
+      )
+      .subscribe(value => this.setFilter());
+  }
+
   ngOnDestroy() {
-    if (this.changesSubscription) {
-      this.changesSubscription.unsubscribe();
-    }
-    if (this.changesSubscription2) {
-      this.changesSubscription2.unsubscribe();
-    }
+    this.changesSubscription?.unsubscribe();
+  }
+
+  onValueChanged(value: string) {
+    this.query = value;
+    this.subject.next(value);
   }
 
   setFilter() {
@@ -32,7 +42,6 @@ export class DefaultFilter implements Filter, OnDestroy {
 }
 
 export interface Filter {
-
   debounceTime: number;
   changesSubscription?: Subscription;
   query: string;

projects/angular2-smart-table/src/lib/components/filter/filter-types/input-filter.component.ts

@@ -1,6 +1,4 @@
-import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {FormControl} from '@angular/forms';
-import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
+import {Component} from '@angular/core';
 
 import {DefaultFilter} from './default-filter';
 
@@ -9,39 +7,13 @@ import {DefaultFilter} from './default-filter';
     template: `
     <input
       [ngClass]="inputClass"
-      [formControl]="inputControl"
-      class="form-control"
       type="text"
+      [value]="query"
+      (change)="onValueChanged($any($event.target).value)"
+      (keyup)="onValueChanged($any($event.target).value)"
       placeholder="{{ column.placeholder || column.title }}"/>
   `,
     standalone: false
 })
-export class InputFilterComponent extends DefaultFilter implements OnInit, OnChanges {
-
-  inputControl = new FormControl();
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
-    if (this.query) {
-      this.inputControl.setValue(this.query);
-    }
-    this.inputControl.valueChanges
-      .pipe(
-        distinctUntilChanged(),
-        debounceTime(this.debounceTime),
-      )
-      .subscribe((value: string) => {
-        this.query = this.inputControl.value;
-        this.setFilter();
-      });
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.query) {
-      this.inputControl.setValue(this.query);
-    }
-  }
+export class InputFilterComponent extends DefaultFilter {
 }

projects/angular2-smart-table/src/lib/components/filter/filter-types/select-filter.component.ts

@@ -1,6 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {NgControl} from '@angular/forms';
-import {debounceTime, distinctUntilChanged, skip} from 'rxjs/operators';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 
 import {DefaultFilter} from './default-filter';
 import {FilterSettings, ListFilterSettings} from "../../../lib/settings";
@@ -9,10 +7,8 @@ import {FilterSettings, ListFilterSettings} from "../../../lib/settings";
     selector: 'select-filter',
     template: `
     <select [ngClass]="inputClass"
-            class="form-control"
-            #inputControl
-            [(ngModel)]="query">
-
+            [value]="query"
+            (change)="onValueChanged($any($event.target).value)">
         <option value="">{{ config.selectText ?? 'Select...' }}</option>
         <option *ngFor="let option of config.list" [value]="option.value">
           {{ option.title }}
@@ -21,9 +17,7 @@ import {FilterSettings, ListFilterSettings} from "../../../lib/settings";
   `,
     standalone: false
 })
-export class SelectFilterComponent extends DefaultFilter implements OnInit {
-
-  @ViewChild('inputControl', { read: NgControl, static: true }) inputControl!: NgControl;
+export class SelectFilterComponent extends DefaultFilter implements OnInit, OnDestroy {
 
   config!: ListFilterSettings;
 
@@ -34,17 +28,6 @@ export class SelectFilterComponent extends DefaultFilter implements OnInit {
     if (this.column.filterFunction === undefined && strict) {
       this.column.filterFunction = (v, f) => v?.toString() === f;
     }
-
-    const exist = this.inputControl.valueChanges;
-    if (!exist) {
-      return;
-    }
-    exist
-      .pipe(
-        skip(1),
-        distinctUntilChanged(),
-        debounceTime(this.debounceTime)
-      )
-      .subscribe((value: string) => this.setFilter());
+    super.ngOnInit();
   }
 }

projects/angular2-smart-table/src/lib/components/filter/filter.module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 import {FilterComponent} from './filter.component';
 import {DefaultFilterComponent} from "./default-filter.component";
@@ -25,8 +24,6 @@ const FILTER_COMPONENTS = [
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
   ],
   declarations: [
     ...FILTER_COMPONENTS,

projects/angular2-smart-table/src/lib/components/pager/pager.component.ts

@@ -54,7 +54,7 @@ import {DataSource, DataSourceChangeEvent} from '../../lib/data-source/data-sour
 
     <nav *ngIf="perPageSelect && perPageSelect.length > 0" class="angular2-smart-pagination-per-page">
       <label for="per-page" *ngIf="perPageSelectLabel">{{perPageSelectLabel}}</label>
-      <select (change)="onChangePerPage($event)" [(ngModel)]="currentPerPage" id="per-page">
+      <select (change)="onChangePerPage($event)" [value]="currentPerPage" id="per-page">
         <option *ngFor="let item of perPageSelect" [value]="item">{{ item }}</option>
       </select>
     </nav>

projects/angular2-smart-table/src/lib/components/pager/pager.module.ts

@@ -1,13 +1,11 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
 
 import {PagerComponent} from './pager.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule,
   ],
   declarations: [
     PagerComponent,

projects/angular2-smart-table/src/lib/components/tbody/tbody.component.html

@@ -1,7 +1,7 @@
 <ng-container  *ngFor="let row of grid.getRows()">
   <tr (click)="userSelectRow.emit(row)" (mouseover)="rowHover.emit(row)" class="angular2-smart-row" [className]="rowClassFunction(row)" [ngClass]="{selected: row.isSelected}">
     <td *ngIf="isMultiSelectVisible" class="angular2-smart-actions angular2-smart-action-multiple-select" (click)="multipleSelectRow.emit(row)">
-      <input type="checkbox" class="form-check-input" [ngModel]="row.isSelected">
+      <input type="checkbox" [checked]="row.isSelected">
     </td>
     <td *ngIf="!row.isInEditing && showActionColumnLeft" class="angular2-smart-actions">
 

projects/angular2-smart-table/src/lib/components/tbody/tbody.module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
 
 import {CellModule} from '../cell/cell.module';
 
@@ -24,7 +23,6 @@ const TBODY_COMPONENTS = [
 @NgModule({
     imports: [
         CommonModule,
-        FormsModule,
         CellModule,
         PipesModule,
     ],