refactor: use built in transform for boolean and number

projects/ngx-datatable/src/lib/components/columns/column.directive.ts

@@ -1,8 +1,10 @@
 import {
+  booleanAttribute,
   ContentChild,
   Directive,
   inject,
   Input,
+  numberAttribute,
   OnChanges,
   PipeTransform,
   TemplateRef
@@ -20,20 +22,20 @@ export class DataTableColumnDirective<TRow> implements TableColumn, OnChanges {
   private columnChangesService = inject(ColumnChangesService);
   @Input() name: string;
   @Input() prop: TableColumnProp;
-  @Input() frozenLeft: boolean;
-  @Input() frozenRight: boolean;
-  @Input() flexGrow: number;
-  @Input() resizeable: boolean;
+  @Input({ transform: booleanAttribute }) frozenLeft: boolean;
+  @Input({ transform: booleanAttribute }) frozenRight: boolean;
+  @Input({ transform: numberAttribute }) flexGrow: number;
+  @Input({ transform: booleanAttribute }) resizeable: boolean;
   @Input() comparator: any;
   @Input() pipe: PipeTransform;
-  @Input() sortable: boolean;
-  @Input() draggable: boolean;
-  @Input() canAutoResize: boolean;
-  @Input() minWidth: number;
-  @Input() width: number;
-  @Input() maxWidth: number;
-  @Input() checkboxable: boolean;
-  @Input() headerCheckboxable: boolean;
+  @Input({ transform: booleanAttribute }) sortable: boolean;
+  @Input({ transform: booleanAttribute }) draggable: boolean;
+  @Input({ transform: booleanAttribute }) canAutoResize: boolean;
+  @Input({ transform: numberAttribute }) minWidth: number;
+  @Input({ transform: numberAttribute }) width: number;
+  @Input({ transform: numberAttribute }) maxWidth: number;
+  @Input({ transform: booleanAttribute }) checkboxable: boolean;
+  @Input({ transform: booleanAttribute }) headerCheckboxable: boolean;
   @Input() headerClass:
     | string
     | ((data: { column: TableColumn }) => string | Record<string, boolean>);
@@ -46,7 +48,7 @@ export class DataTableColumnDirective<TRow> implements TableColumn, OnChanges {
         value: any;
         rowHeight: number;
       }) => string | Record<string, boolean>);
-  @Input() isTreeColumn: boolean;
+  @Input({ transform: booleanAttribute }) isTreeColumn: boolean;
   @Input() treeLevelIndent: number;
   @Input() summaryFunc: (cells: any[]) => any;
   @Input() summaryTemplate: TemplateRef<any>;

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -1,6 +1,7 @@
 import {
   AfterContentInit,
   AfterViewInit,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -15,6 +16,7 @@ import {
   Input,
   IterableDiffer,
   IterableDiffers,
+  numberAttribute,
   OnDestroy,
   OnInit,
   Output,
@@ -179,20 +181,20 @@ export class DatatableComponent<TRow = any>
   /**
    * Enable vertical scrollbars
    */
-  @Input() scrollbarV = false;
+  @Input({ transform: booleanAttribute }) scrollbarV = false;
 
   /**
    * Enable vertical scrollbars dynamically on demand.
    * Property `scrollbarV` needs to be set `true` too.
    * Width that is gained when no scrollbar is needed
    * is added to the inner table width.
    */
-  @Input() scrollbarVDynamic = false;
+  @Input({ transform: booleanAttribute }) scrollbarVDynamic = false;
 
   /**
    * Enable horz scrollbars
    */
-  @Input() scrollbarH = false;
+  @Input({ transform: booleanAttribute }) scrollbarH = false;
 
   /**
    * The row height; which is necessary
@@ -210,31 +212,31 @@ export class DatatableComponent<TRow = any>
    * The minimum header height in pixels.
    * Pass a falsey for no header
    */
-  @Input() headerHeight = 30;
+  @Input({ transform: numberAttribute }) headerHeight = 30;
 
   /**
    * The minimum footer height in pixels.
    * Pass falsey for no footer
    */
-  @Input() footerHeight = 0;
+  @Input({ transform: numberAttribute }) footerHeight = 0;
 
   /**
    * If the table should use external paging
    * otherwise its assumed that all data is preloaded.
    */
-  @Input() externalPaging = false;
+  @Input({ transform: booleanAttribute }) externalPaging = false;
 
   /**
    * If the table should use external sorting or
    * the built-in basic sorting.
    */
-  @Input() externalSorting = false;
+  @Input({ transform: booleanAttribute }) externalSorting = false;
 
   /**
    * The page size to be shown.
    * Default value: `undefined`
    */
-  @Input() set limit(val: number | undefined) {
+  @Input({ transform: numberAttribute }) set limit(val: number | undefined) {
     this._limit = val;
 
     // recalculate sizes/etc
@@ -252,7 +254,7 @@ export class DatatableComponent<TRow = any>
    * The total count of all rows.
    * Default value: `0`
    */
-  @Input() set count(val: number) {
+  @Input({ transform: numberAttribute }) set count(val: number) {
     this._count = val;
 
     // recalculate sizes/etc
@@ -270,7 +272,7 @@ export class DatatableComponent<TRow = any>
    * The current offset ( page - 1 ) shown.
    * Default value: `0`
    */
-  @Input() set offset(val: number) {
+  @Input({ transform: numberAttribute }) set offset(val: number) {
     this._offset = val;
   }
   get offset(): number {
@@ -281,13 +283,13 @@ export class DatatableComponent<TRow = any>
    * Show the linear loading bar.
    * Default value: `false`
    */
-  @Input() loadingIndicator = false;
+  @Input({ transform: booleanAttribute }) loadingIndicator = false;
 
   /**
    * Show ghost loaders on each cell.
    * Default value: `false`
    */
-  @Input() set ghostLoadingIndicator(val: boolean) {
+  @Input({ transform: booleanAttribute }) set ghostLoadingIndicator(val: boolean) {
     this._ghostLoadingIndicator = val;
     if (val && this.scrollbarV && !this.externalPaging) {
       // in case where we don't have predefined total page length
@@ -316,13 +318,13 @@ export class DatatableComponent<TRow = any>
    * Enable/Disable ability to re-order columns
    * by dragging them.
    */
-  @Input() reorderable = true;
+  @Input({ transform: booleanAttribute }) reorderable = true;
 
   /**
    * Swap columns on re-order columns or
    * move them.
    */
-  @Input() swapColumns = true;
+  @Input({ transform: booleanAttribute }) swapColumns = true;
 
   /**
    * The type of sorting
@@ -399,7 +401,7 @@ export class DatatableComponent<TRow = any>
    * whether they will start expanded or not. If ommited the default is NOT expanded.
    *
    */
-  @Input() groupExpansionDefault = false;
+  @Input({ transform: booleanAttribute }) groupExpansionDefault = false;
 
   /**
    * Property to which you can use for custom tracking of rows.
@@ -413,12 +415,12 @@ export class DatatableComponent<TRow = any>
    *
    * @memberOf DatatableComponent
    */
-  @Input() selectAllRowsOnPage = false;
+  @Input({ transform: booleanAttribute }) selectAllRowsOnPage = false;
 
   /**
    * A flag for row virtualization on / off
    */
-  @Input() virtualization = true;
+  @Input({ transform: booleanAttribute }) virtualization = true;
 
   /**
    * Tree from relation
@@ -433,12 +435,12 @@ export class DatatableComponent<TRow = any>
   /**
    * A flag for switching summary row on / off
    */
-  @Input() summaryRow = false;
+  @Input({ transform: booleanAttribute }) summaryRow = false;
 
   /**
    * A height of summary row
    */
-  @Input() summaryHeight = 30;
+  @Input({ transform: numberAttribute }) summaryHeight = 30;
 
   /**
    * A property holds a summary row position: top/bottom
@@ -459,14 +461,14 @@ export class DatatableComponent<TRow = any>
    * A flag to enable drag behavior of native HTML5 drag and drop API on rows.
    * If set to true, {@link rowDragEvents} will emit dragstart and dragend events.
    */
-  @Input() rowDraggable = false;
+  @Input({ transform: booleanAttribute }) rowDraggable = false;
 
   /**
    * A flag to controll behavior of sort states.
    * By default sort on column toggles between ascending and descending without getting removed.
    * Set true to clear sorting of column after performing ascending and descending sort on that column.
    */
-  @Input() enableClearingSortState = false;
+  @Input({ transform: booleanAttribute }) enableClearingSortState = false;
 
   /**
    * Body was scrolled typically in a `scrollbarV:true` scenario.

projects/ngx-datatable/src/lib/components/footer/footer.directive.ts

@@ -1,10 +1,10 @@
-import { ContentChild, Directive, Input, TemplateRef } from '@angular/core';
+import { ContentChild, Directive, Input, numberAttribute, TemplateRef } from '@angular/core';
 import { DataTableFooterTemplateDirective } from './footer-template.directive';
 import { FooterContext } from '../../types/public.types';
 
 @Directive({ selector: 'ngx-datatable-footer' })
 export class DatatableFooterDirective {
-  @Input() footerHeight: number;
+  @Input({ transform: numberAttribute }) footerHeight: number;
   @Input() totalMessage: string;
   @Input() selectedMessage: string | boolean;
   @Input() pagerLeftArrowIcon: string;

projects/ngx-datatable/src/lib/directives/disable-row.directive.ts

@@ -1,4 +1,11 @@
-import { AfterContentInit, Directive, ElementRef, inject, Input } from '@angular/core';
+import {
+  AfterContentInit,
+  booleanAttribute,
+  Directive,
+  ElementRef,
+  inject,
+  Input
+} from '@angular/core';
 
 /**
  * Row Disable Directive
@@ -15,7 +22,7 @@ import { AfterContentInit, Directive, ElementRef, inject, Input } from '@angular
 export class DisableRowDirective {
   private element = inject(ElementRef);
   private _disabled = false;
-  @Input() set disabled(val: boolean) {
+  @Input({ transform: booleanAttribute }) set disabled(val: boolean) {
     this._disabled = val;
     if (val) {
       this.disableAllElements();

projects/ngx-datatable/src/lib/directives/draggable.directive.ts

@@ -1,4 +1,5 @@
 import {
+  booleanAttribute,
   Directive,
   ElementRef,
   EventEmitter,
@@ -26,8 +27,8 @@ import { DraggableDragEvent } from '../types/internal.types';
 export class DraggableDirective implements OnDestroy, OnChanges {
   @Input() dragEventTarget: any;
   @Input() dragModel: TableColumn;
-  @Input() dragX = true;
-  @Input() dragY = true;
+  @Input({ transform: booleanAttribute }) dragX = true;
+  @Input({ transform: booleanAttribute }) dragY = true;
 
   @Output() dragStart: EventEmitter<DraggableDragEvent> = new EventEmitter();
   @Output() dragging: EventEmitter<DraggableDragEvent> = new EventEmitter();

projects/ngx-datatable/src/lib/directives/long-press.directive.ts

@@ -1,9 +1,11 @@
 import {
+  booleanAttribute,
   Directive,
   EventEmitter,
   HostBinding,
   HostListener,
   Input,
+  numberAttribute,
   OnDestroy,
   Output
 } from '@angular/core';
@@ -14,9 +16,9 @@ import { TableColumn } from '../types/table-column.type';
 
 @Directive({ selector: '[long-press]' })
 export class LongPressDirective implements OnDestroy {
-  @Input() pressEnabled = true;
+  @Input({ transform: booleanAttribute }) pressEnabled = true;
   @Input() pressModel: TableColumn;
-  @Input() duration = 500;
+  @Input({ transform: numberAttribute }) duration = 500;
 
   @Output() longPressStart: EventEmitter<{ event: MouseEvent; model: TableColumn }> =
     new EventEmitter();

projects/ngx-datatable/src/lib/directives/resizeable.directive.ts

@@ -1,12 +1,14 @@
 import {
   AfterViewInit,
+  booleanAttribute,
   Directive,
   ElementRef,
   EventEmitter,
   HostBinding,
   HostListener,
   inject,
   Input,
+  numberAttribute,
   OnDestroy,
   Output,
   Renderer2
@@ -20,9 +22,9 @@ import { takeUntil } from 'rxjs/operators';
 export class ResizeableDirective implements OnDestroy, AfterViewInit {
   private renderer = inject(Renderer2);
 
-  @HostBinding('class.resizeable') @Input() resizeEnabled = true;
-  @Input() minWidth: number;
-  @Input() maxWidth: number;
+  @HostBinding('class.resizeable') @Input({ transform: booleanAttribute }) resizeEnabled = true;
+  @Input({ transform: numberAttribute }) minWidth: number;
+  @Input({ transform: numberAttribute }) maxWidth: number;
 
   @Output() resize: EventEmitter<any> = new EventEmitter();
   @Output() resizing: EventEmitter<any> = new EventEmitter();