refactor: use signal queries for internal properties

The breaking change note covers future changes to prevent duplicate announcement in the changelog.

BREAKING CHANGE: Several fields and methods are removed from the public API.
Those fields were never intended to be exposed.

Author: spike-rabbit

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

@@ -68,7 +68,7 @@
       [disableRowCheck]="disableRowCheck()"
       [rowDraggable]="rowDraggable()"
       [rowDragEvents]="rowDragEvents"
-      [rowDefTemplate]="rowDefTemplate"
+      [rowDefTemplate]="_rowDefTemplate()"
       [cssClasses]="cssClasses()"
       [(selected)]="selected"
       (page)="onBodyPage($event)"
@@ -99,7 +99,7 @@
       [pageSize]="pageSize"
       [offset]="offset"
       [footerHeight]="footerHeight()"
-      [footerTemplate]="footer"
+      [footerTemplate]="_footer()"
       [totalMessage]="messages().totalMessage ?? 'total'"
       [pagerLeftArrowIcon]="cssClasses().pagerLeftArrow"
       [pagerRightArrowIcon]="cssClasses().pagerRightArrow"

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

@@ -6,6 +6,7 @@ import {
   Component,
   computed,
   ContentChild,
+  contentChild,
   contentChildren,
   DoCheck,
   effect,
@@ -26,8 +27,7 @@ import {
   signal,
   TemplateRef,
   untracked,
-  viewChild,
-  ViewChild
+  viewChild
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -609,34 +609,31 @@ export class DatatableComponent<TRow extends Row = any>
 
   /**
    * Footer template gathered from the ContentChild
+   * @internal
    */
-  @ContentChild(DatatableFooterDirective)
-  footer?: DatatableFooterDirective;
+  readonly _footer = contentChild(DatatableFooterDirective);
 
   /**
    * Reference to the body component for manually
    * invoking functions on the body.
    */
-  @ViewChild(DataTableBodyComponent)
-  bodyComponent!: DataTableBodyComponent<TRow & { treeStatus?: TreeStatus }>;
-
-  /**
-   * Reference to the header component for manually
-   * invoking functions on the header.
-   */
-  @ViewChild(DataTableHeaderComponent)
-  headerComponent!: DataTableHeaderComponent;
+  private readonly _bodyComponent =
+    viewChild.required<DataTableBodyComponent<TRow & { treeStatus?: TreeStatus }>>(
+      DataTableBodyComponent
+    );
 
-  @ViewChild(DataTableHeaderComponent, { read: ElementRef })
-  headerElement?: ElementRef<HTMLElement>;
+  private readonly _headerElement = viewChild(DataTableHeaderComponent, {
+    read: ElementRef<HTMLElement>
+  });
 
-  @ViewChild(DataTableBodyComponent, { read: ElementRef })
-  private bodyElement!: ElementRef<HTMLElement>;
+  private readonly _bodyElement = viewChild.required(DataTableBodyComponent, {
+    read: ElementRef<HTMLElement>
+  });
 
-  @ContentChild(DatatableRowDefDirective, {
+  /** @internal */
+  readonly _rowDefTemplate = contentChild(DatatableRowDefDirective, {
     read: TemplateRef
-  })
-  rowDefTemplate?: TemplateRef<any>;
+  });
 
   /**
    * Returns if all rows are selected.
@@ -645,9 +642,10 @@ export class DatatableComponent<TRow extends Row = any>
     const selected = this.selected();
     let allRowsSelected = this.rows() && selected && selected.length === this.rows()!.length;
 
-    if (this.bodyComponent && this.selectAllRowsOnPage()) {
-      const indexes = this.bodyComponent.indexes;
-      const rowsOnPage = indexes().last - indexes().first;
+    const bodyComponent = this._bodyComponent();
+    if (bodyComponent && this.selectAllRowsOnPage()) {
+      const indexes = bodyComponent.indexes();
+      const rowsOnPage = indexes.last - indexes.first;
       allRowsSelected = selected.length === rowsOnPage;
     }
 
@@ -660,8 +658,9 @@ export class DatatableComponent<TRow extends Row = any>
   readonly bodyHeight = computed(() => {
     if (this.scrollbarV()) {
       let height = this.dimensions().height;
-      if (this.headerElement) {
-        height = height - this.headerElement.nativeElement.getBoundingClientRect().height;
+      const headerElement = this._headerElement();
+      if (headerElement) {
+        height = height - headerElement.nativeElement.getBoundingClientRect().height;
       }
       return height - this.footerHeight();
     }
@@ -920,7 +919,7 @@ export class DatatableComponent<TRow extends Row = any>
     if (!width) {
       return [];
     }
-    const bodyElement = this.bodyElement?.nativeElement;
+    const bodyElement = this._bodyElement().nativeElement;
     this.verticalScrollVisible = bodyElement?.scrollHeight > bodyElement?.clientHeight;
     if (this.scrollbarV() || this.scrollbarVDynamic()) {
       width =
@@ -1001,7 +1000,7 @@ export class DatatableComponent<TRow extends Row = any>
    */
   onFooterPage(event: PagerPageEvent) {
     this.offset = event.page - 1;
-    this.bodyComponent.updateOffsetY(this.offset);
+    this._bodyComponent().updateOffsetY(this.offset);
 
     this.page.emit({
       count: this.count(),
@@ -1156,7 +1155,7 @@ export class DatatableComponent<TRow extends Row = any>
 
     // Always go to first page when sorting to see the newly sorted data
     this.offset = 0;
-    this.bodyComponent.updateOffsetY(this.offset);
+    this._bodyComponent().updateOffsetY(this.offset);
     // Emit the page object with updated offset value
     this.page.emit({
       count: this.count(),
@@ -1172,10 +1171,10 @@ export class DatatableComponent<TRow extends Row = any>
    * Toggle all row selection
    */
   onHeaderSelect(): void {
-    if (this.bodyComponent && this.selectAllRowsOnPage()) {
+    const bodyComponent = this._bodyComponent();
+    if (bodyComponent && this.selectAllRowsOnPage()) {
       // before we splice, chk if we currently have all selected
-      const first = this.bodyComponent.indexes().first;
-      const last = this.bodyComponent.indexes().last;
+      const { first, last } = bodyComponent.indexes();
       const allSelected = this.selected().length === last - first;
 
       // do the opposite here