docs(examples): migrate content-full-layout-full-scroll example to signals

Author: spliffone

src/app/examples/si-layouts/content-full-layout-full-scroll.html

@@ -55,7 +55,7 @@ <h1 class="application-name">Application name</h1>
       columnMode="force"
       selectionType="single"
       [cssClasses]="tableConfig.cssClasses"
-      [rows]="rows"
+      [rows]="rows()"
       [columns]="[
         { name: 'Name', sortable: false },
         { name: 'Role', sortable: false },
@@ -65,10 +65,10 @@ <h1 class="application-name">Application name</h1>
       [footerHeight]="tableConfig.footerHeight"
       [rowHeight]="tableConfig.rowHeightSmall"
       [externalPaging]="true"
-      [count]="page.totalElements"
-      [offset]="page.pageNumber"
-      [limit]="page.size"
-      [ghostLoadingIndicator]="isLoading > 0"
+      [count]="totalElements()"
+      [offset]="pageNumber()"
+      [limit]="pageSize()"
+      [ghostLoadingIndicator]="isLoading() > 0"
       (page)="setPage($event)"
       (siResizeObserver)="updateTableData($event)"
     >
@@ -78,8 +78,8 @@ <h1 class="application-name">Application name</h1>
             class="ms-auto"
             forwardButtonText="forward"
             backButtonText="back"
-            [currentPage]="page.pageNumber + 1"
-            [totalRowCount]="rows.length"
+            [currentPage]="pageNumber() + 1"
+            [totalRowCount]="rows().length"
             (currentPageChange)="table.onFooterPage({ page: $event })"
           />
         </ng-template>

src/app/examples/si-layouts/content-full-layout-full-scroll.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-import { Component, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import {
   SiAccountDetailsComponent,
@@ -47,10 +47,13 @@ import { CorporateEmployee, DataService, Page, PageRequest } from '../datatable/
     SiHeaderLogoDirective
   ],
   templateUrl: './content-full-layout-full-scroll.html',
-  providers: [DataService]
+  providers: [DataService],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SampleComponent implements OnInit {
-  menuItems: NavbarVerticalItem[] = [
+  private readonly dataService = inject(DataService);
+  protected readonly tableConfig = SI_DATATABLE_CONFIG;
+  protected readonly menuItems: NavbarVerticalItem[] = [
     {
       type: 'group',
       label: 'Home',
@@ -73,13 +76,13 @@ export class SampleComponent implements OnInit {
     { type: 'router-link', label: 'Energy & Operations', routerLink: 'energy' },
     { type: 'router-link', label: 'Test Coverage', routerLink: 'coverage' }
   ];
-  tableConfig = SI_DATATABLE_CONFIG;
-  pageRequest?: PageRequest;
-  page = new Page();
-  rows = new Array<CorporateEmployee>();
-  isLoading = 0;
 
-  private dataService = inject(DataService);
+  protected pageRequest?: PageRequest;
+  protected readonly totalElements = signal(0);
+  protected readonly pageNumber = signal(0);
+  protected readonly pageSize = signal(0);
+  protected readonly rows = signal<CorporateEmployee[]>([]);
+  protected readonly isLoading = signal(0);
 
   ngOnInit(): void {
     // timeout needed to work in the iFrame in the docs
@@ -96,21 +99,23 @@ export class SampleComponent implements OnInit {
       this.pageRequest?.pageSize !== pageRequest.pageSize
     ) {
       this.pageRequest = pageRequest;
-      this.isLoading++;
+      this.isLoading.update(value => value + 1);
       // We reload the data when the page number or page size changes.
       // During this time, we want to show the ghost loading indicator.
       // To make sure no data is presented. We set the rows in the table
       // to an empty array.
-      this.rows = [];
+      this.rows.set([]);
       this.dataService.getResults(pageRequest).subscribe(pagedData => {
-        this.isLoading--;
+        this.isLoading.update(value => value - 1);
         // Make sure we set the date to the latest page request.
         if (
           this.pageRequest?.offset === pageRequest.offset &&
           this.pageRequest?.pageSize === pageRequest.pageSize
         ) {
-          this.page = pagedData.page;
-          this.rows = pagedData.data;
+          this.totalElements.set(pagedData.page.totalElements);
+          this.pageNumber.set(pagedData.page.pageNumber);
+          this.pageSize.set(pagedData.page.size);
+          this.rows.set(pagedData.data);
         }
       });
     }
@@ -124,10 +129,10 @@ export class SampleComponent implements OnInit {
     const bodyHeight =
       dimensions.height - SI_DATATABLE_CONFIG.headerHeight - SI_DATATABLE_CONFIG.footerHeight;
     const pageSize = Math.floor(bodyHeight / SI_DATATABLE_CONFIG.rowHeightSmall);
-    this.page.size = pageSize;
+    this.pageSize.set(pageSize);
     this.setPage({
-      offset: this.page.pageNumber,
-      pageSize: this.page.size
+      offset: this.pageNumber(),
+      pageSize: this.pageSize()
     });
   }
 }