chore: merge main

Author: NathanWalker

CHANGELOG.md

@@ -1,3 +1,13 @@
+# [20.1.0](https://github.com/NativeScript/angular/compare/20.0.0...20.1.0) (2025-12-02)
+
+
+### Features
+
+* **ListView:** sticky headers, search bar and sectioned data support with v9 ([5ad8a89](https://github.com/NativeScript/angular/commit/5ad8a897a05014d0c737f7f8580f156574938df0))
+  * **Note**: Requires NativeScript Core v9+
+
+
+
 # [20.0.0](https://github.com/NativeScript/angular/compare/19.0.1...20.0.0) (2025-06-01)
 
 

apps/nativescript-demo-ng/App_Resources/Android/src/main/AndroidManifest.xml

@@ -20,7 +20,8 @@
 		android:icon="@drawable/icon"
 		android:usesCleartextTraffic="${isUnitTesting}"
 		android:label="@string/app_name"
-		android:theme="@style/AppTheme">
+		android:theme="@style/AppTheme"
+		android:networkSecurityConfig="@xml/network_security_config">
 
 		<activity
 			android:name="com.tns.NativeScriptActivity"

apps/nativescript-demo-ng/App_Resources/Android/src/main/res/xml/network_security_config.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <base-config cleartextTrafficPermitted="true">
+        <trust-anchors>
+            <certificates src="system" />
+            <certificates src="user" />
+        </trust-anchors>
+    </base-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">localhost</domain>
+        <domain includeSubdomains="true">127.0.0.1</domain>
+        <domain includeSubdomains="true">10.0.2.2</domain>
+    </domain-config>
+</network-security-config>
+
+

apps/nativescript-demo-ng/package.json

@@ -9,6 +9,7 @@
     "@nativescript/android": "~9.0.0",
     "@nativescript/ios": "~9.0.0",
     "@nativescript/tailwind": "^2.1.0",
-    "@nativescript/unit-test-runner": "4.0.0"
+    "@nativescript/unit-test-runner": "^4.0.0",
+    "@nativescript/visionos": "~9.0.0"
   }
 }

apps/nativescript-demo-ng/project.json

@@ -38,9 +38,12 @@
         "uglify": false,
         "release": false,
         "forDevice": false,
-        "prepare": false
+        "prepare": false,
+        "flags": "--env.commonjs"
       },
-      "dependsOn": ["^build"]
+      "dependsOn": [
+        "^build"
+      ]
     },
     "clean": {
       "executor": "@nativescript/nx:clean",
@@ -51,11 +54,17 @@
     },
     "test": {
       "executor": "@nativescript/nx:test",
-      "outputs": ["{workspaceRoot}/coverage/apps/nativescript-demo-ng"],
+      "outputs": [
+        "{workspaceRoot}/coverage/apps/nativescript-demo-ng"
+      ],
       "options": {
-        "coverage": false
+        "coverage": false,
+        "flags": "--env.commonjs"
       },
+      "dependsOn": [
+        "^build"
+      ],
       "configurations": {}
     }
   }
-}
+}

apps/nativescript-demo-ng/src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { ItemDetailComponent } from './item/item-detail.component';
 import { ItemsComponent } from './item/items.component';
+import { ListViewStickyComponent } from './list-view-sticky/list-view-sticky.component';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -10,6 +11,10 @@ export const routes: Routes = [
   { path: 'item/:id', component: ItemDetailComponent },
   { path: 'item2', loadChildren: () => import('./item2/item2.routes').then((m) => m.ITEM2_ROUTES) },
   { path: 'rootlazy', loadChildren: () => import('./item3/item3.module').then((m) => m.Item3Module) },
+  {
+    path: 'list-view-sticky',
+    component: ListViewStickyComponent,
+  },
 
   /**
    * Test tab named outlets

apps/nativescript-demo-ng/src/app/list-view-sticky/list-view-sticky.component.html

@@ -0,0 +1,31 @@
+<ActionBar title="ListView Sticky Headers"></ActionBar>
+
+<GridLayout rows="1,*" columns="*">
+  <GridLayout row="1" columns="*">
+    <!-- Using inside this grid setup helps Android position search bar if used. It also helps iOS with ActionBar safe area overflow cases with sticky header. -->
+    <ListView
+      [items]="countries()"
+      [sectioned]="true"
+      [stickyHeader]="true"
+      [stickyHeaderHeight]="45"
+      [stickyHeaderTopPadding]="false"
+      [showSearch]="true"
+      [searchAutoHide]="true"
+      [stickyHeaderTemplate]="headerTemplateString"
+      [itemTemplateSelector]="templateSelector"
+      (searchChange)="onSearchChange($event)"
+    >
+      <ng-template let-item="item" nsTemplateKey="main">
+        <GridLayout
+          columns="auto,auto,*"
+          class="p-3 my-1 mx-2 rounded-xl bg-white"
+          boxShadow="0px 1px 2px rgba(0,0,0,0.2)"
+        >
+          <Label color="black" [text]="item?.flag" class="ml-1"></Label>
+          <Label col="1" [text]="item?.name" class="ml-2 text-black"></Label>
+          <Label col="2" [text]="item?.code" class="ml-1 text-[#999]"></Label>
+        </GridLayout>
+      </ng-template>
+    </ListView>
+  </GridLayout>
+</GridLayout>