feat: Angular 21

.github/workflows/build.yml

@@ -25,6 +25,6 @@ jobs:
           node-version: lts/*
       - uses: nrwl/nx-set-shas@v3
       - name: npm install
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: Build.all affected
         run: npx nx affected --target=build --exclude nativescript-demo-ng

.prettierignore

@@ -2,6 +2,7 @@
 
 /dist
 /coverage
+packages/angular/dist
 
 **/xplat/*/.xplatframework
 

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

apps/nativescript-demo-ng/project.json

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

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

@@ -2,6 +2,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 { SPLIT_VIEW_ROUTES } from './split-view-demo/split-view.routes';
 // import { HomeComponent } from './home/home.component';
 // import { BootGuardService } from './boot-guard.service';
 
@@ -15,6 +16,10 @@ export const routes: Routes = [
     path: 'list-view-sticky',
     component: ListViewStickyComponent,
   },
+  {
+    path: 'split-view-demo',
+    children: SPLIT_VIEW_ROUTES,
+  },
 
   /**
    * Test tab named outlets

apps/nativescript-demo-ng/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <GridLayout rows="*" columns="*">
-  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView($event)" (selectedIndexChange)="onIndexChanged($event)">
+  <MDBottomNavigation selectedIndex="0" (loaded)="loadedTabView()" (selectedIndexChange)="onIndexChanged($event)">
     <MDTabStrip class="c-tabs">
       <MDTabStripItem class="tabstripitem">
         <Label [text]="tabItems?.start?.title" class="text-center text-sm"></Label>
@@ -13,3 +13,46 @@
     </MDTabContentItem>
   </MDBottomNavigation>
 </GridLayout>
+
+
+<!-- Uncomment to try core TabView features -->
+<!-- <TabView
+  tabTextFontSize="11"
+  iosTabBarMinimizeBehavior="onScrollDown"
+  class="bg-black"
+>
+  <GridLayout
+    *tabItem="{
+        title: 'Home',
+        iconSource: 'sys://house.fill',
+      }"
+  >
+    <Label text="Home Content" class="text-center text-white"></Label>
+  </GridLayout>
+
+  <GridLayout
+    *tabItem="{
+        title: 'Saved',
+        iconSource: 'sys://star.fill',
+      }"
+  >
+    <Label text="Second Tab Content" class="text-center text-white"></Label>
+  </GridLayout>
+
+  <GridLayout
+    *tabItem="{
+        title: 'Settings',
+        iconSource: 'sys://gearshape.fill',
+      }"
+  >
+    <Label text="Third Tab Content" class="text-center text-white"></Label>
+  </GridLayout>
+  <GridLayout
+    *tabItem="{
+        iconSource: 'res://ns-logo',
+        role: 'search'
+      }"
+  >
+    <Label text="Search Tab" class="text-center text-white"></Label>
+  </GridLayout>
+</TabView> -->

apps/nativescript-demo-ng/src/app/home/home.component.ts

@@ -1,13 +1,13 @@
 import { Component, inject, NgZone, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterExtensions, NativeScriptCommonModule } from '@nativescript/angular';
-import { Page, TabView } from '@nativescript/core';
+import { EventData, Page, TabView } from '@nativescript/core';
 
 @Component({
   selector: 'demo-home',
   templateUrl: './home.component.html',
   imports: [NativeScriptCommonModule],
-  schemas: [NO_ERRORS_SCHEMA]
+  schemas: [NO_ERRORS_SCHEMA],
 })
 export class HomeComponent implements OnInit {
   private _ngZone = inject(NgZone);
@@ -35,10 +35,6 @@ export class HomeComponent implements OnInit {
     }
   }
 
-  loadedTabView(args) {
-    //
-  }
-
   private _viewTab(index: number) {
     let route;
     switch (index) {
@@ -61,7 +57,7 @@ export class HomeComponent implements OnInit {
     });
   }
 
-  private _initMenu(profilePic?: string) {
+  private _initMenu() {
     for (let i = 0; i < this._tabs.length; i++) {
       const tab = this._tabs[i];
       // console.log('================')

apps/nativescript-demo-ng/src/app/item/item-detail.component.ts

@@ -12,7 +12,7 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemDetailComponent implements OnInit {
-  item: Item;
+  item: Item | null = null;
   private itemService = inject(ItemService);
   private route = inject(ActivatedRoute);
 

apps/nativescript-demo-ng/src/app/item/items.component.ts

@@ -13,8 +13,8 @@ import { ModalDialogService, NativeDialogService, NativeScriptCommonModule } fro
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class ItemsComponent implements OnInit, OnDestroy {
-  message = 'Hello Angular 20.0.0!';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0!';
+  items: Array<Item> = [];
   private itemService = inject(ItemService);
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);

apps/nativescript-demo-ng/src/app/item2/item-detail2.component.html

@@ -14,7 +14,7 @@
     <Label
       text="Congrats to the Angular Team!"
       textWrap="true"
-      class="text-center mt-5 font-bold text-3xl text-blue-500"
+      class="text-center mt-5 font-bold text-3xl text-blue-500 leading-3"
     ></Label>
     <Label
       row="1"

apps/nativescript-demo-ng/src/app/item3/items.component.ts

@@ -22,8 +22,8 @@ export class ItemsComponent implements OnInit, OnDestroy {
   private nativeDialog = inject(NativeDialogService);
   private modalDialog = inject(ModalDialogService);
   private http = inject(HttpClient);
-  message = 'Hello Angular 20.0.0';
-  items: Array<Item>;
+  message = 'Hello Angular 21.0.0';
+  items: Array<Item> = [];
   borderRadius: number;
   fontSize: number;
 

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

@@ -1,6 +1,6 @@
 import { Component, inject, NO_ERRORS_SCHEMA, signal } from '@angular/core';
 import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
-import { Page } from '@nativescript/core';
+import { Page, SearchEventData } from '@nativescript/core';
 
 interface CountryItem {
   name: string;
@@ -1407,11 +1407,11 @@ export class ListViewStickyComponent {
 
   private _originalCountries: CountryListType | undefined;
 
-  templateSelector(item: CountrySection | CountryItem, _index: number, _items: any) {
+  templateSelector() {
     return 'main';
   }
 
-  onSearchChange(event: any) {
+  onSearchChange(event: SearchEventData) {
     const text = (event?.text ?? '').toLowerCase();
     if (this.searchText !== text) {
       this.searchText = text;

apps/nativescript-demo-ng/src/app/modal/modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
+import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, ViewContainerRef, inject } from '@angular/core';
 import {
   ModalDialogService,
   NativeDialogModule,

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

@@ -0,0 +1,13 @@
+<SplitView
+  displayMode="twoBesideSecondary"
+  splitBehavior="tile"
+  preferredPrimaryColumnWidthFraction="0.25"
+  preferredSupplementaryColumnWidthFraction="0.33"
+  preferredInspectorColumnWidthFraction="0.2"
+  (inspectorChange)="splitViewState.onInspectorChange($event)"
+>
+  <page-router-outlet name="primary" splitRole="primary"></page-router-outlet>
+  <page-router-outlet name="secondary" splitRole="secondary"></page-router-outlet>
+  <page-router-outlet name="supplementary" splitRole="supplementary"></page-router-outlet>
+  <page-router-outlet name="inspector" splitRole="inspector"></page-router-outlet>
+</SplitView>

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-demo.component.ts

@@ -0,0 +1,52 @@
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit, AfterViewInit } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+  PageRouterOutlet,
+  RouterExtensions,
+} from '@nativescript/angular';
+import { SplitViewState } from './split-view.state';
+
+@Component({
+  selector: 'ns-split-view-demo',
+  templateUrl: './split-view-demo.component.html',
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewDemoComponent implements OnInit, AfterViewInit {
+  router = inject(RouterExtensions);
+  splitViewState = inject(SplitViewState);
+
+  ngOnInit() {
+    console.log('[SplitViewDemo] ngOnInit');
+  }
+
+  ngAfterViewInit() {
+    console.log('[SplitViewDemo] ngAfterViewInit - view is initialized, navigating to outlets');
+    // Use setTimeout to ensure the view is fully rendered and outlets are registered
+    setTimeout(() => {
+      console.log('[SplitViewDemo] Navigating to outlets...');
+      this.router
+        .navigate(
+          [
+            '/',
+            {
+              outlets: {
+                primary: ['primary'],
+                secondary: ['secondary'],
+                supplementary: ['supplementary'],
+                inspector: ['inspector'],
+              },
+            },
+          ],
+          { animated: false },
+        )
+        .then((success) => {
+          console.log(`[SplitViewDemo] navigation result: ${success}`);
+        })
+        .catch((err) => {
+          console.error(`[SplitViewDemo] navigation error: ${err}`);
+        });
+    }, 0);
+  }
+}

apps/nativescript-demo-ng/src/app/split-view-demo/split-view-inspector.component.ts

@@ -0,0 +1,44 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-split-view-inspector',
+  template: `
+    <ActionBar title="Inspector" flat="true"></ActionBar>
+    <GridLayout rows="*" class="h-full bg-slate-50 dark:bg-slate-950">
+      <ScrollView>
+        <StackLayout class="p-5">
+          <StackLayout class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Pinned" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
+              <Label col="0" text="Show badges" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="false"></Switch>
+            </GridLayout>
+            <GridLayout rows="auto" columns="*,auto" class="px-4 py-3">
+              <Label col="0" text="Compact" class="text-sm text-slate-700 dark:text-slate-200"></Label>
+              <Switch col="1" checked="true"></Switch>
+            </GridLayout>
+          </StackLayout>
+
+          <StackLayout
+            class="mt-5 rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 p-4"
+          >
+            <Label text="Opacity" class="text-base font-semibold text-slate-900 dark:text-slate-100"></Label>
+            <Label
+              text="Use the inspector for controls and metadata."
+              class="mt-2 text-sm text-slate-700 dark:text-slate-200 leading-[3]"
+              textWrap="true"
+            ></Label>
+            <Slider class="mt-3" minValue="0" maxValue="100" value="85"></Slider>
+          </StackLayout>
+        </StackLayout>
+      </ScrollView>
+    </GridLayout>
+  `,
+  imports: [NativeScriptCommonModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class SplitViewInspectorComponent {}