From aef0a9a1e85d59ad0236a583f9b7f0439d509314 Mon Sep 17 00:00:00 2001
From: Steve Brush <steve.brush@blackbaud.com>
Date: Tue, 2 Jul 2024 14:18:23 -0400
Subject: [PATCH] fix(code-examples): satisfy ESLint rules for action button
 and AG Grid code examples (#2423)

---
 apps/code-examples/src/app/app.component.ts   |  2 +-
 apps/code-examples/src/app/app.module.ts      |  2 +-
 .../basic/context-menu.component.ts           | 18 +++++-----
 .../ag-grid/data-entry-grid/basic/data.ts     |  2 +-
 .../data-entry-grid/basic/demo.component.ts   | 19 +++++++----
 .../basic/edit-modal.component.ts             | 23 ++++++-------
 .../context-menu.component.ts                 |  8 +++--
 .../data-manager-added/demo.component.ts      |  4 +--
 .../edit-modal.component.ts                   | 23 ++++++-------
 .../filter-modal.component.ts                 | 10 +++---
 .../data-manager-added/filters.ts             |  4 +++
 .../data-manager-added/view-grid.component.ts | 27 +++++++++------
 .../inline-help/context-menu.component.ts     |  8 +++--
 .../data-entry-grid/inline-help/data.ts       |  2 +-
 .../inline-help/demo.component.ts             | 18 ++++++----
 .../inline-help/edit-modal.component.ts       | 23 ++++++-------
 .../context-menu.component.ts                 |  8 +++--
 .../basic-multiselect/demo.component.ts       | 16 ++++++---
 .../data-grid/basic/context-menu.component.ts |  8 +++--
 .../ag-grid/data-grid/basic/demo.component.ts | 18 ++++++----
 .../context-menu.component.ts                 |  8 +++--
 .../demo.component.ts                         |  3 +-
 .../filter-modal.component.ts                 | 10 +++---
 .../data-manager-multiselect/filters.ts       |  4 +++
 .../view-grid.component.ts                    | 27 +++++++++------
 .../data-manager/context-menu.component.ts    |  8 +++--
 .../data-grid/data-manager/demo.component.ts  |  3 +-
 .../data-manager/filter-modal.component.ts    | 10 +++---
 .../ag-grid/data-grid/data-manager/filters.ts |  4 +++
 .../data-manager/view-grid.component.ts       | 30 ++++++++++------
 .../inline-help/context-menu.component.ts     |  8 +++--
 .../data-grid/inline-help/demo.component.ts   | 12 ++++---
 .../paging/context-menu.component.ts          |  8 +++--
 .../data-grid/paging/demo.component.ts        | 34 +++++++++++--------
 .../top-scroll/context-menu.component.ts      |  8 +++--
 .../data-grid/top-scroll/demo.component.ts    | 16 ++++++---
 .../data-manager/basic/demo.component.ts      |  3 +-
 .../basic/filter-modal.component.ts           | 11 +++---
 .../data-manager/basic/filters.ts             |  4 +++
 .../data-manager/basic/view-grid.component.ts | 19 ++++++-----
 .../basic/view-repeater.component.ts          | 30 +++++++++-------
 apps/code-examples/src/main.ts                |  5 ++-
 42 files changed, 312 insertions(+), 196 deletions(-)
 create mode 100644 apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts
 create mode 100644 apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filters.ts
 create mode 100644 apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filters.ts
 create mode 100644 apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filters.ts

diff --git a/apps/code-examples/src/app/app.component.ts b/apps/code-examples/src/app/app.component.ts
index 5103ddc744..767af5402a 100644
--- a/apps/code-examples/src/app/app.component.ts
+++ b/apps/code-examples/src/app/app.component.ts
@@ -29,7 +29,7 @@ export class AppComponent {
     });
 
     const themeSettings = new SkyThemeSettings(
-      SkyTheme.presets['modern'],
+      SkyTheme.presets.modern,
       SkyThemeMode.presets.light,
     );
 
diff --git a/apps/code-examples/src/app/app.module.ts b/apps/code-examples/src/app/app.module.ts
index 56715ac932..00210979ee 100644
--- a/apps/code-examples/src/app/app.module.ts
+++ b/apps/code-examples/src/app/app.module.ts
@@ -8,7 +8,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserAnimationsModule, BrowserModule, AppRoutingModule],
+  imports: [AppRoutingModule, BrowserAnimationsModule, BrowserModule],
   providers: [SkyThemeService],
   bootstrap: [AppComponent],
 })
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts
index 346476d03d..2539b1f86a 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -12,15 +14,15 @@ import { ICellRendererParams } from 'ag-grid-community';
   imports: [SkyDropdownModule],
 })
 export class ContextMenuComponent implements ICellRendererAngularComp {
-  public contextMenuAriaLabel = '';
-  public deleteAriaLabel = '';
-  public markInactiveAriaLabel = '';
-  public moreInfoAriaLabel = '';
+  protected contextMenuAriaLabel = '';
+  protected deleteAriaLabel = '';
+  protected markInactiveAriaLabel = '';
+  protected moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
@@ -32,6 +34,6 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   }
 
   protected actionClicked(action: string): void {
-    alert(`${action} clicked for ${this.#name}`);
+    console.error(`${action} clicked for ${this.#name}`);
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts
index 69167d2b8c..c19a452159 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/data.ts
@@ -95,7 +95,7 @@ export interface AgGridDemoRow {
   jobTitle?: AutocompleteOption;
 }
 
-export const AG_GRID_DEMO_DATA = [
+export const AG_GRID_DEMO_DATA: AgGridDemoRow[] = [
   {
     selected: true,
     name: 'Billy Bob',
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts
index ec5cac36b3..fcc5116316 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/demo.component.ts
@@ -85,7 +85,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -127,7 +128,9 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -165,7 +168,7 @@ export class DemoComponent {
       if (result.reason === 'cancel' || result.reason === 'close') {
         alert('Edits canceled!');
       } else {
-        this.gridData = result.data;
+        this.gridData = result.data as AgGridDemoRow[];
 
         if (this.#gridApi) {
           this.#gridApi.refreshCells();
@@ -192,11 +195,13 @@ export class DemoComponent {
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
-
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts
index 30c5ebe6c3..159e729388 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/basic/edit-modal.component.ts
@@ -96,7 +96,7 @@ export class EditModalComponent {
         type: SkyCellType.Date,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {
           return { skyComponentProperties: { minDate: params.data.startDate } };
         },
@@ -107,7 +107,7 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
           return {
             skyComponentProperties: {
@@ -132,12 +132,9 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
-          const selectedDepartment: string =
-            params.data &&
-            params.data.department &&
-            params.data.department.name;
+          const selectedDepartment = params.data?.department?.name;
 
           const editParams: {
             skyComponentProperties: SkyAgGridAutocompleteProperties;
@@ -178,7 +175,9 @@ export class EditModalComponent {
 
     this.gridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -196,15 +195,15 @@ export class EditModalComponent {
 
   #departmentSelectionChange(
     change: SkyAutocompleteSelectionChange,
-    node: IRowNode,
+    node: IRowNode<AgGridDemoRow>,
   ): void {
-    if (change.selectedItem && change.selectedItem !== node.data.department) {
+    if (change.selectedItem && change.selectedItem !== node.data?.department) {
       this.#clearJobTitle(node);
     }
   }
 
-  #clearJobTitle(node: IRowNode | null): void {
-    if (node) {
+  #clearJobTitle(node: IRowNode<AgGridDemoRow> | null): void {
+    if (node?.data) {
       node.data.jobTitle = undefined;
       this.#changeDetectorRef.markForCheck();
 
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts
index 8663a5b340..adeeeaf44e 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/demo.component.ts
@@ -15,7 +15,7 @@ import { SkyModalConfigurationInterface, SkyModalService } from '@skyux/modals';
 
 import { Subject, takeUntil } from 'rxjs';
 
-import { AG_GRID_DEMO_DATA } from './data';
+import { AG_GRID_DEMO_DATA, AgGridDemoRow } from './data';
 import { EditModalContext } from './edit-modal-context';
 import { EditModalComponent } from './edit-modal.component';
 import { FilterModalComponent } from './filter-modal.component';
@@ -130,7 +130,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       if (result.reason === 'cancel' || result.reason === 'close') {
         alert('Edits canceled!');
       } else {
-        this.items = result.data;
+        this.items = result.data as AgGridDemoRow[];
         alert('Saving data!');
       }
 
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts
index 6a6e427253..ecb1ec7b1b 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/edit-modal.component.ts
@@ -71,7 +71,7 @@ export class EditModalComponent {
         type: SkyCellType.Date,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {
           return {
             skyComponentProperties: {
@@ -86,7 +86,7 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
           return {
             skyComponentProperties: {
@@ -109,12 +109,9 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
-          const selectedDepartment: string =
-            params.data &&
-            params.data.department &&
-            params.data.department.name;
+          const selectedDepartment = params.data?.department?.name;
 
           const editParams: {
             skyComponentProperties: SkyAgGridAutocompleteProperties;
@@ -155,7 +152,9 @@ export class EditModalComponent {
 
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridService.getEditableGridOptions({
@@ -173,15 +172,15 @@ export class EditModalComponent {
 
   #departmentSelectionChange(
     change: SkyAutocompleteSelectionChange,
-    node: IRowNode,
+    node: IRowNode<AgGridDemoRow>,
   ): void {
-    if (change.selectedItem && change.selectedItem !== node.data.department) {
+    if (change.selectedItem && change.selectedItem !== node.data?.department) {
       this.#clearJobTitle(node);
     }
   }
 
-  #clearJobTitle(node: IRowNode | null): void {
-    if (node) {
+  #clearJobTitle(node: IRowNode<AgGridDemoRow> | null): void {
+    if (node?.data) {
       node.data.jobTitle = undefined;
 
       if (this.#gridApi) {
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts
index d6e436fc20..ff896f8d7c 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filter-modal.component.ts
@@ -13,6 +13,8 @@ import {
 import { SkyCheckboxModule } from '@skyux/forms';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 
+import { Filters } from './filters';
+
 @Component({
   standalone: true,
   selector: 'app-filter-modal',
@@ -30,10 +32,10 @@ export class FilterModalComponent {
 
   constructor() {
     if (this.#context.filterData?.filters) {
-      const filters = this.#context.filterData.filters;
+      const filters = this.#context.filterData.filters as Filters;
 
-      this.jobTitle = filters.jobTitle || 'any';
-      this.hideSales = filters.hideSales || false;
+      this.jobTitle = filters.jobTitle ?? 'any';
+      this.hideSales = filters.hideSales ?? false;
     }
 
     this.#changeDetector.markForCheck();
@@ -46,7 +48,7 @@ export class FilterModalComponent {
     result.filters = {
       jobTitle: this.jobTitle,
       hideSales: this.hideSales,
-    };
+    } satisfies Filters;
 
     this.#changeDetector.markForCheck();
     this.#instance.save(result);
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts
new file mode 100644
index 0000000000..bbf4a0fe8d
--- /dev/null
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/filters.ts
@@ -0,0 +1,4 @@
+export interface Filters {
+  jobTitle?: string;
+  hideSales?: boolean;
+}
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts
index 8f67dc8840..68fe4a5b01 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/data-manager-added/view-grid.component.ts
@@ -28,6 +28,7 @@ import { Subject, of, takeUntil } from 'rxjs';
 
 import { ContextMenuComponent } from './context-menu.component';
 import { AgGridDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -85,7 +86,8 @@ export class ViewGridComponent implements OnInit, OnDestroy {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -238,16 +240,21 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.#changeDetectorRef.markForCheck();
   }
 
-  protected onRowSelected(rowSelectedEvent: RowSelectedEvent): void {
-    if (!rowSelectedEvent.data.selected) {
+  protected onRowSelected(
+    rowSelectedEvent: RowSelectedEvent<AgGridDemoRow>,
+  ): void {
+    if (!rowSelectedEvent.data?.selected) {
       this.#updateData();
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 
@@ -256,11 +263,11 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     const filterData = this.#dataState.filterData;
 
     if (filterData?.filters) {
-      const filters = filterData.filters;
+      const filters = filterData.filters as Filters;
 
       filteredItems = items.filter((item) => {
         return (
-          ((filters.hideSales && item.department.name !== 'Sales') ||
+          (!!(filters.hideSales && item.department.name !== 'Sales') ||
             !filters.hideSales) &&
           ((filters.jobTitle !== 'any' &&
             item.jobTitle?.name === filters.jobTitle) ||
@@ -286,7 +293,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
             property === 'name'
           ) {
             const propertyText = item[property]?.toLowerCase();
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -301,7 +308,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
 
   #setInitialColumnOrder(): void {
     const viewState = this.#dataState.getViewStateById(this.#viewId);
-    const visibleColumns = viewState?.displayedColumnIds || [];
+    const visibleColumns = viewState?.displayedColumnIds ?? [];
 
     this.#columnDefs.sort((col1, col2) => {
       const col1Index = visibleColumns.findIndex(
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data.ts
index 69167d2b8c..c19a452159 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/data.ts
@@ -95,7 +95,7 @@ export interface AgGridDemoRow {
   jobTitle?: AutocompleteOption;
 }
 
-export const AG_GRID_DEMO_DATA = [
+export const AG_GRID_DEMO_DATA: AgGridDemoRow[] = [
   {
     selected: true,
     name: 'Billy Bob',
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/demo.component.ts
index 8df9c2d6a3..56bfe1ad47 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/demo.component.ts
@@ -99,7 +99,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
       headerComponentParams: {
         inlineHelpComponent: InlineHelpComponent,
       },
@@ -155,7 +156,9 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -192,7 +195,7 @@ export class DemoComponent {
       if (result.reason === 'cancel' || result.reason === 'close') {
         alert('Edits canceled!');
       } else {
-        this.gridData = result.data;
+        this.gridData = result.data as AgGridDemoRow[];
         this.#gridApi?.refreshCells();
 
         alert('Saving data!');
@@ -215,10 +218,13 @@ export class DemoComponent {
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.ts
index 04ea2ec9b6..09565ddc57 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-entry-grid/inline-help/edit-modal.component.ts
@@ -95,7 +95,7 @@ export class EditModalComponent {
         type: SkyCellType.Date,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridDatepickerProperties } => {
           return { skyComponentProperties: { minDate: params.data.startDate } };
         },
@@ -106,7 +106,7 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
           return {
             skyComponentProperties: {
@@ -129,12 +129,9 @@ export class EditModalComponent {
         type: SkyCellType.Autocomplete,
         editable: true,
         cellEditorParams: (
-          params: ICellEditorParams,
+          params: ICellEditorParams<AgGridDemoRow>,
         ): { skyComponentProperties: SkyAgGridAutocompleteProperties } => {
-          const selectedDepartment: string =
-            params.data &&
-            params.data.department &&
-            params.data.department.name;
+          const selectedDepartment = params.data?.department?.name;
           const editParams: {
             skyComponentProperties: SkyAgGridAutocompleteProperties;
           } = { skyComponentProperties: { data: [] } };
@@ -174,7 +171,9 @@ export class EditModalComponent {
 
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
     };
 
     this.gridOptions = this.#agGridSvc.getEditableGridOptions({
@@ -192,15 +191,15 @@ export class EditModalComponent {
 
   #departmentSelectionChange(
     change: SkyAutocompleteSelectionChange,
-    node: IRowNode,
+    node: IRowNode<AgGridDemoRow>,
   ): void {
-    if (change.selectedItem && change.selectedItem !== node.data.department) {
+    if (change.selectedItem && change.selectedItem !== node.data?.department) {
       this.#clearJobTitle(node);
     }
   }
 
-  #clearJobTitle(node: IRowNode | null): void {
-    if (node) {
+  #clearJobTitle(node: IRowNode<AgGridDemoRow> | null): void {
+    if (node?.data) {
       node.data.jobTitle = undefined;
 
       this.#changeDetectorRef.markForCheck();
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts
index 3a3dac0c82..ee0a910475 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic-multiselect/demo.component.ts
@@ -62,7 +62,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -83,7 +84,9 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
       rowSelection: 'multiple',
     };
 
@@ -97,10 +100,13 @@ export class DemoComponent {
     this.#gridApi.sizeColumnsToFit();
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts
index f34586edbe..dc35e1cf5f 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/basic/demo.component.ts
@@ -12,7 +12,7 @@ import {
 } from 'ag-grid-community';
 
 import { ContextMenuComponent } from './context-menu.component';
-import { AG_GRID_DEMO_DATA } from './data';
+import { AG_GRID_DEMO_DATA, AgGridDemoRow } from './data';
 
 @Component({
   standalone: true,
@@ -53,7 +53,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -74,7 +75,9 @@ export class DemoComponent {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
       rowSelection: 'single',
     };
 
@@ -88,10 +91,13 @@ export class DemoComponent {
     this.#gridApi.sizeColumnsToFit();
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/demo.component.ts
index 6f71036596..5d26068f41 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/demo.component.ts
@@ -17,6 +17,7 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { AG_GRID_DEMO_DATA } from './data';
 import { FilterModalComponent } from './filter-modal.component';
+import { Filters } from './filters';
 import { ViewGridComponent } from './view-grid.component';
 
 @Component({
@@ -54,7 +55,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       filters: {
         hideSales: false,
         jobTitle: 'any',
-      },
+      } satisfies Filters,
     },
     views: [
       {
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.ts
index b6663f960a..28109d2ee9 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filter-modal.component.ts
@@ -13,6 +13,8 @@ import {
 import { SkyCheckboxModule } from '@skyux/forms';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 
+import { Filters } from './filters';
+
 @Component({
   standalone: true,
   selector: 'app-filter-modal',
@@ -30,10 +32,10 @@ export class FilterModalComponent {
 
   constructor() {
     if (this.#context.filterData && this.#context.filterData.filters) {
-      const filters = this.#context.filterData.filters;
+      const filters = this.#context.filterData.filters as Filters;
 
-      this.jobTitle = filters.jobTitle || 'any';
-      this.hideSales = filters.hideSales || false;
+      this.jobTitle = filters.jobTitle ?? 'any';
+      this.hideSales = filters.hideSales ?? false;
     }
 
     this.#changeDetectorRef.markForCheck();
@@ -46,7 +48,7 @@ export class FilterModalComponent {
     result.filters = {
       jobTitle: this.jobTitle,
       hideSales: this.hideSales,
-    };
+    } satisfies Filters;
 
     this.#changeDetectorRef.markForCheck();
     this.#instance.save(result);
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filters.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filters.ts
new file mode 100644
index 0000000000..bbf4a0fe8d
--- /dev/null
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/filters.ts
@@ -0,0 +1,4 @@
+export interface Filters {
+  jobTitle?: string;
+  hideSales?: boolean;
+}
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts
index a873e21bbc..e6525d4928 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager-multiselect/view-grid.component.ts
@@ -31,6 +31,7 @@ import { Subject, of, takeUntil } from 'rxjs';
 
 import { ContextMenuComponent } from './context-menu.component';
 import { AgGridDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -85,7 +86,8 @@ export class ViewGridComponent implements OnInit, OnDestroy {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -210,8 +212,10 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.#updateDisplayedItems();
   }
 
-  protected onRowSelected(rowSelectedEvent: RowSelectedEvent): void {
-    if (!rowSelectedEvent.data.selected) {
+  protected onRowSelected(
+    rowSelectedEvent: RowSelectedEvent<AgGridDemoRow>,
+  ): void {
+    if (!rowSelectedEvent.data?.selected) {
       this.#updateDisplayedItems();
     }
   }
@@ -230,7 +234,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
             property === 'name'
           ) {
             const propertyText = item[property].toLowerCase();
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -247,12 +251,12 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     let filteredItems = items;
     const filterData = this.#dataState && this.#dataState.filterData;
 
-    if (filterData && filterData.filters) {
-      const filters = filterData.filters;
+    if (filterData?.filters) {
+      const filters = filterData.filters as Filters;
 
       filteredItems = items.filter((item) => {
         return (
-          ((filters.hideSales && item.department.name !== 'Sales') ||
+          (!!(filters.hideSales && item.department.name !== 'Sales') ||
             !filters.hideSales) &&
           ((filters.jobTitle !== 'any' &&
             item.jobTitle?.name === filters.jobTitle) ||
@@ -265,10 +269,13 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     return filteredItems;
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/demo.component.ts
index cdd5ae997d..fa35ea2ccb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/demo.component.ts
@@ -16,6 +16,7 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { AG_GRID_DEMO_DATA } from './data';
 import { FilterModalComponent } from './filter-modal.component';
+import { Filters } from './filters';
 import { ViewGridComponent } from './view-grid.component';
 
 @Component({
@@ -55,7 +56,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       filters: {
         hideSales: false,
         jobTitle: 'any',
-      },
+      } satisfies Filters,
     },
     views: [
       {
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.ts
index b6663f960a..28109d2ee9 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filter-modal.component.ts
@@ -13,6 +13,8 @@ import {
 import { SkyCheckboxModule } from '@skyux/forms';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 
+import { Filters } from './filters';
+
 @Component({
   standalone: true,
   selector: 'app-filter-modal',
@@ -30,10 +32,10 @@ export class FilterModalComponent {
 
   constructor() {
     if (this.#context.filterData && this.#context.filterData.filters) {
-      const filters = this.#context.filterData.filters;
+      const filters = this.#context.filterData.filters as Filters;
 
-      this.jobTitle = filters.jobTitle || 'any';
-      this.hideSales = filters.hideSales || false;
+      this.jobTitle = filters.jobTitle ?? 'any';
+      this.hideSales = filters.hideSales ?? false;
     }
 
     this.#changeDetectorRef.markForCheck();
@@ -46,7 +48,7 @@ export class FilterModalComponent {
     result.filters = {
       jobTitle: this.jobTitle,
       hideSales: this.hideSales,
-    };
+    } satisfies Filters;
 
     this.#changeDetectorRef.markForCheck();
     this.#instance.save(result);
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filters.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filters.ts
new file mode 100644
index 0000000000..bbf4a0fe8d
--- /dev/null
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/filters.ts
@@ -0,0 +1,4 @@
+export interface Filters {
+  jobTitle?: string;
+  hideSales?: boolean;
+}
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts
index 42d5a82e2b..e7d272c08e 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/data-manager/view-grid.component.ts
@@ -30,6 +30,7 @@ import { Subject, takeUntil } from 'rxjs';
 
 import { ContextMenuComponent } from './context-menu.component';
 import { AgGridDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -76,7 +77,8 @@ export class ViewGridComponent implements OnInit, OnDestroy {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -193,8 +195,10 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.#updateDisplayedItems();
   }
 
-  protected onRowSelected(rowSelectedEvent: RowSelectedEvent): void {
-    if (!rowSelectedEvent.data.selected) {
+  protected onRowSelected(
+    rowSelectedEvent: RowSelectedEvent<AgGridDemoRow>,
+  ): void {
+    if (!rowSelectedEvent.data?.selected) {
       this.#updateDisplayedItems();
     }
   }
@@ -204,7 +208,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     const searchText = this.#dataState && this.#dataState.searchText;
 
     if (searchText) {
-      searchedItems = items.filter(function (item: AgGridDemoRow) {
+      searchedItems = items.filter((item: AgGridDemoRow) => {
         let property: keyof typeof item;
 
         for (property in item) {
@@ -214,7 +218,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
           ) {
             const propertyText = item[property].toLowerCase();
 
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -231,11 +235,12 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     let filteredItems = items;
     const filterData = this.#dataState && this.#dataState.filterData;
 
-    if (filterData && filterData.filters) {
-      const filters = filterData.filters;
+    if (filterData?.filters) {
+      const filters = filterData.filters as Filters;
+
       filteredItems = items.filter((item: AgGridDemoRow) => {
         return (
-          ((filters.hideSales && item.department.name !== 'Sales') ||
+          (!!(filters.hideSales && item.department.name !== 'Sales') ||
             !filters.hideSales) &&
           ((filters.jobTitle !== 'any' &&
             item.jobTitle?.name === filters.jobTitle) ||
@@ -248,10 +253,13 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     return filteredItems;
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/demo.component.ts
index b50790f82b..4e2b620aa7 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/inline-help/demo.component.ts
@@ -81,7 +81,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
       headerComponentParams: {
         inlineHelpComponent: InlineHelpComponent,
       },
@@ -146,10 +147,13 @@ export class DemoComponent {
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts
index 7c6e5993ae..fe7e40d11c 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/paging/demo.component.ts
@@ -23,7 +23,7 @@ import { Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
 import { ContextMenuComponent } from './context-menu.component';
-import { AG_GRID_DEMO_DATA } from './data';
+import { AG_GRID_DEMO_DATA, AgGridDemoRow } from './data';
 
 @Component({
   standalone: true,
@@ -65,7 +65,8 @@ export class DemoComponent implements OnInit, OnDestroy {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -93,7 +94,9 @@ export class DemoComponent implements OnInit, OnDestroy {
   constructor() {
     const gridOptions: GridOptions = {
       columnDefs: this.#columnDefs,
-      onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+      onGridReady: (gridReadyEvent): void => {
+        this.onGridReady(gridReadyEvent);
+      },
       rowSelection: 'single',
       pagination: true,
       suppressPaginationPanel: true,
@@ -108,7 +111,7 @@ export class DemoComponent implements OnInit, OnDestroy {
   public ngOnInit(): void {
     this.#subscriptions.add(
       this.#activatedRoute.queryParamMap
-        .pipe(map((params) => params.get('page') || '1'))
+        .pipe(map((params) => params.get('page') ?? '1'))
         .subscribe((page) => {
           this.currentPage = Number(page);
           this.#gridApi?.paginationGoToPage(this.currentPage - 1);
@@ -142,20 +145,21 @@ export class DemoComponent implements OnInit, OnDestroy {
     this.#gridApi.paginationGoToPage(this.currentPage - 1);
   }
 
-  protected onPageChange(page: number): void {
-    this.#router
-      .navigate(['.'], {
-        relativeTo: this.#activatedRoute,
-        queryParams: { page: page.toString(10) },
-        queryParamsHandling: 'merge',
-      })
-      .then();
+  protected async onPageChange(page: number): Promise<void> {
+    await this.#router.navigate(['.'], {
+      relativeTo: this.#activatedRoute,
+      queryParams: { page: page.toString(10) },
+      queryParamsHandling: 'merge',
+    });
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/context-menu.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/context-menu.component.ts
index 346476d03d..acfc353ddb 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/context-menu.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/context-menu.component.ts
@@ -4,6 +4,8 @@ import { SkyDropdownModule } from '@skyux/popovers';
 import { ICellRendererAngularComp } from 'ag-grid-angular';
 import { ICellRendererParams } from 'ag-grid-community';
 
+import { AgGridDemoRow } from './data';
+
 @Component({
   standalone: true,
   selector: 'app-context-menu',
@@ -17,10 +19,10 @@ export class ContextMenuComponent implements ICellRendererAngularComp {
   public markInactiveAriaLabel = '';
   public moreInfoAriaLabel = '';
 
-  #name = '';
+  #name: string | undefined;
 
-  public agInit(params: ICellRendererParams): void {
-    this.#name = params.data && params.data.name;
+  public agInit(params: ICellRendererParams<AgGridDemoRow>): void {
+    this.#name = params.data?.name;
     this.contextMenuAriaLabel = `Context menu for ${this.#name}`;
     this.deleteAriaLabel = `Delete ${this.#name}`;
     this.markInactiveAriaLabel = `Mark ${this.#name} inactive`;
diff --git a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/demo.component.ts b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/demo.component.ts
index 34eead39e8..2e853df75b 100644
--- a/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/ag-grid/data-grid/top-scroll/demo.component.ts
@@ -66,7 +66,8 @@ export class DemoComponent {
       field: 'endDate',
       headerName: 'End date',
       type: SkyCellType.Date,
-      valueFormatter: this.#endDateFormatter,
+      valueFormatter: (params: ValueFormatterParams<AgGridDemoRow, Date>) =>
+        this.#endDateFormatter(params),
     },
     {
       field: 'department',
@@ -88,7 +89,9 @@ export class DemoComponent {
     this.gridOptions = this.#agGridSvc.getGridOptions({
       gridOptions: {
         columnDefs: this.#columnDefs,
-        onGridReady: (gridReadyEvent): void => this.onGridReady(gridReadyEvent),
+        onGridReady: (gridReadyEvent): void => {
+          this.onGridReady(gridReadyEvent);
+        },
         context: {
           enableTopScroll: true,
         },
@@ -115,10 +118,13 @@ export class DemoComponent {
     }
   }
 
-  #endDateFormatter(params: ValueFormatterParams): string {
-    const dateConfig = { year: 'numeric', month: '2-digit', day: '2-digit' };
+  #endDateFormatter(params: ValueFormatterParams<AgGridDemoRow, Date>): string {
     return params.value
-      ? params.value.toLocaleDateString('en-us', dateConfig)
+      ? params.value.toLocaleDateString('en-us', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+        })
       : 'N/A';
   }
 }
diff --git a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/demo.component.ts b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/demo.component.ts
index 95b58cc720..1bcafcc0ff 100644
--- a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/demo.component.ts
+++ b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/demo.component.ts
@@ -13,6 +13,7 @@ import {
 
 import { DATA_MANAGER_DEMO_DATA, DataManagerDemoRow } from './data';
 import { FilterModalComponent } from './filter-modal.component';
+import { Filters } from './filters';
 import { ViewGridComponent } from './view-grid.component';
 import { ViewRepeaterComponent } from './view-repeater.component';
 
@@ -54,7 +55,7 @@ export class DemoComponent implements OnInit {
           filtersApplied: true,
           filters: {
             hideOrange: true,
-          },
+          } satisfies Filters,
         },
         views: [
           {
diff --git a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.ts b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.ts
index 1ba14df3f9..2a28d09ffe 100644
--- a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.ts
+++ b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filter-modal.component.ts
@@ -7,6 +7,8 @@ import {
 import { SkyCheckboxModule, SkyInputBoxModule } from '@skyux/forms';
 import { SkyModalInstance, SkyModalModule } from '@skyux/modals';
 
+import { Filters } from './filters';
+
 @Component({
   standalone: true,
   selector: 'app-filter-modal',
@@ -28,9 +30,10 @@ export class FilterModalComponent implements OnInit {
 
   public ngOnInit(): void {
     if (this.#context.filterData?.filters) {
-      const filters = this.#context.filterData.filters;
-      this.fruitType = filters.type || 'any';
-      this.hideOrange = filters.hideOrange || false;
+      const filters = this.#context.filterData.filters as Filters;
+
+      this.fruitType = filters.type ?? 'any';
+      this.hideOrange = filters.hideOrange ?? false;
     }
   }
 
@@ -41,7 +44,7 @@ export class FilterModalComponent implements OnInit {
     result.filters = {
       type: this.fruitType,
       hideOrange: this.hideOrange,
-    };
+    } satisfies Filters;
 
     this.#instance.save(result);
   }
diff --git a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filters.ts b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filters.ts
new file mode 100644
index 0000000000..a4e9ab9c2d
--- /dev/null
+++ b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/filters.ts
@@ -0,0 +1,4 @@
+export interface Filters {
+  hideOrange?: boolean;
+  type?: string;
+}
diff --git a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-grid.component.ts b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-grid.component.ts
index baa733d8a3..7b0982696b 100644
--- a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-grid.component.ts
+++ b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-grid.component.ts
@@ -27,6 +27,7 @@ import { Subject, of } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { DataManagerDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -150,8 +151,10 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     this.#ngUnsubscribe.complete();
   }
 
-  protected onRowSelected(rowSelectedEvent: RowSelectedEvent): void {
-    if (!rowSelectedEvent.data.selected) {
+  protected onRowSelected(
+    rowSelectedEvent: RowSelectedEvent<DataManagerDemoRow>,
+  ): void {
+    if (!rowSelectedEvent.data?.selected) {
       this.#updateData();
     }
   }
@@ -161,12 +164,12 @@ export class ViewGridComponent implements OnInit, OnDestroy {
 
     const filterData = this.#dataState && this.#dataState.filterData;
 
-    if (filterData && filterData.filters) {
-      const filters = filterData.filters;
+    if (filterData?.filters) {
+      const filters = filterData.filters as Filters;
 
       filteredItems = items.filter((item) => {
         return (
-          ((filters.hideOrange && item.color !== 'orange') ||
+          ((filters.hideOrange && item.color !== 'orange') ??
             !filters.hideOrange) &&
           ((filters.type !== 'any' && item.type === filters.type) ||
             !filters.type ||
@@ -189,7 +192,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
     const searchText = this.#dataState && this.#dataState.searchText;
 
     if (searchText) {
-      searchedItems = items.filter(function (item: DataManagerDemoRow) {
+      searchedItems = items.filter((item: DataManagerDemoRow) => {
         let property: keyof typeof item;
 
         for (property in item) {
@@ -198,7 +201,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
             (property === 'name' || property === 'description')
           ) {
             const propertyText = item[property].toLowerCase();
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -212,7 +215,7 @@ export class ViewGridComponent implements OnInit, OnDestroy {
 
   #setInitialColumnOrder(): void {
     const viewState = this.#dataState.getViewStateById(this.viewId);
-    const visibleColumns = viewState?.displayedColumnIds || [];
+    const visibleColumns = viewState?.displayedColumnIds ?? [];
 
     this.#columnDefs.sort((col1, col2) => {
       const col1Index = visibleColumns.findIndex(
diff --git a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-repeater.component.ts b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-repeater.component.ts
index 9418a23c77..95eb01d0c9 100644
--- a/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-repeater.component.ts
+++ b/apps/code-examples/src/app/code-examples/data-manager/data-manager/basic/view-repeater.component.ts
@@ -20,6 +20,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { DataManagerDemoRow } from './data';
+import { Filters } from './filters';
 
 @Component({
   standalone: true,
@@ -48,8 +49,12 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
     sortEnabled: true,
     filterButtonEnabled: true,
     multiselectToolbarEnabled: true,
-    onClearAllClick: () => this.#clearAll(),
-    onSelectAllClick: () => this.#selectAll(),
+    onClearAllClick: () => {
+      this.#clearAll();
+    },
+    onSelectAllClick: () => {
+      this.#selectAll();
+    },
   };
 
   readonly #changeDetector = inject(ChangeDetectorRef);
@@ -83,7 +88,7 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
   }
 
   protected onItemSelect(isSelected: boolean, item: DataManagerDemoRow): void {
-    const selectedItems = this.#dataState.selectedIds || [];
+    const selectedItems = this.#dataState.selectedIds ?? [];
     const itemIndex = selectedItems.indexOf(item.id);
 
     if (isSelected && itemIndex === -1) {
@@ -102,10 +107,10 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
   }
 
   #updateData(): void {
-    const selectedIds = this.#dataState.selectedIds || [];
+    const selectedIds = this.#dataState.selectedIds ?? [];
 
     this.items.forEach((item) => {
-      item.selected = selectedIds.indexOf(item.id) !== -1;
+      item.selected = selectedIds.includes(item.id);
     });
 
     this.displayedItems = this.#filterItems(this.#searchItems(this.items));
@@ -131,7 +136,7 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
       this.#dataState && this.#dataState.searchText?.toUpperCase();
 
     if (searchText) {
-      searchedItems = items.filter(function (item: DataManagerDemoRow) {
+      searchedItems = items.filter((item: DataManagerDemoRow) => {
         let property: keyof typeof item;
 
         for (property in item) {
@@ -140,7 +145,7 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
             (property === 'name' || property === 'description')
           ) {
             const propertyText = item[property].toUpperCase();
-            if (propertyText.indexOf(searchText) > -1) {
+            if (propertyText.includes(searchText)) {
               return true;
             }
           }
@@ -157,11 +162,12 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
     let filteredItems = items;
     const filterData = this.#dataState && this.#dataState.filterData;
 
-    if (filterData && filterData.filters) {
-      const filters = filterData.filters;
+    if (filterData?.filters) {
+      const filters = filterData.filters as Filters;
+
       filteredItems = items.filter((item: DataManagerDemoRow) => {
         if (
-          ((filters.hideOrange && item.color !== 'orange') ||
+          ((filters.hideOrange && item.color !== 'orange') ??
             !filters.hideOrange) &&
           ((filters.type !== 'any' && item.type === filters.type) ||
             !filters.type ||
@@ -178,7 +184,7 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
   }
 
   #selectAll(): void {
-    const selectedIds = this.#dataState.selectedIds || [];
+    const selectedIds = this.#dataState.selectedIds ?? [];
 
     this.displayedItems.forEach((item) => {
       if (!item.selected) {
@@ -193,7 +199,7 @@ export class ViewRepeaterComponent implements OnInit, OnDestroy {
   }
 
   #clearAll(): void {
-    const selectedIds = this.#dataState.selectedIds || [];
+    const selectedIds = this.#dataState.selectedIds ?? [];
 
     this.displayedItems.forEach((item) => {
       if (item.selected) {
diff --git a/apps/code-examples/src/main.ts b/apps/code-examples/src/main.ts
index d9a2e7e4a5..cd9cbc4fad 100644
--- a/apps/code-examples/src/main.ts
+++ b/apps/code-examples/src/main.ts
@@ -10,4 +10,7 @@ if (environment.production) {
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+  .catch((err) => {
+    // eslint-disable-next-line no-console
+    console.error(err);
+  });