feat: demo wip

Author: NathanWalker

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

@@ -1,17 +1,12 @@
-<ActionBar title="SplitView Demo"></ActionBar>
-
-<GridLayout rows="*, *" columns="*">
-  <SplitView
-    row="0"
-    displayMode="twoBesideSecondary"
-    splitBehavior="tile"
-    preferredPrimaryColumnWidthFraction="0.25"
-    preferredSupplementaryColumnWidthFraction="0.33"
-    preferredInspectorColumnWidthFraction="0.2"
-  >
-    <page-router-outlet name="primary"></page-router-outlet>
-    <page-router-outlet name="secondary"></page-router-outlet>
-    <page-router-outlet name="supplementary"></page-router-outlet>
-    <page-router-outlet name="inspector"></page-router-outlet>
-  </SplitView>
-</GridLayout>
+<SplitView
+  displayMode="twoBesideSecondary"
+  splitBehavior="tile"
+  preferredPrimaryColumnWidthFraction="0.25"
+  preferredSupplementaryColumnWidthFraction="0.33"
+  preferredInspectorColumnWidthFraction="0.2"
+>
+  <page-router-outlet name="primary"></page-router-outlet>
+  <page-router-outlet name="secondary"></page-router-outlet>
+  <page-router-outlet name="supplementary"></page-router-outlet>
+  <page-router-outlet name="inspector"></page-router-outlet>
+</SplitView>

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

@@ -1,11 +1,34 @@
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { Component, inject, NO_ERRORS_SCHEMA, OnInit } from '@angular/core';
+import {
+  NativeScriptCommonModule,
+  NativeScriptRouterModule,
+  PageRouterOutlet,
+  RouterExtensions,
+} from '@nativescript/angular';
 
 @Component({
   selector: 'ns-split-view-demo',
   templateUrl: './split-view-demo.component.html',
-  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
-  standalone: true,
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule, PageRouterOutlet],
   schemas: [NO_ERRORS_SCHEMA],
 })
-export class SplitViewDemoComponent {}
+export class SplitViewDemoComponent implements OnInit {
+  router = inject(RouterExtensions);
+
+  ngOnInit() {
+    this.router.navigate(
+      [
+        '/',
+        {
+          outlets: {
+            primary: ['primary'],
+            secondary: ['secondary'],
+            supplementary: ['supplementary'],
+            inspector: ['inspector'],
+          },
+        },
+      ],
+      { animated: false },
+    );
+  }
+}

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

@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Inspector" class="h2 mb-8"></Label>
     <Label row="1" text="This is the inspector column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Primary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the primary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Secondary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the secondary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -7,7 +7,6 @@ import { NativeScriptCommonModule } from '@nativescript/angular';
     <Label row="0" text="Supplementary" class="h2 mb-8"></Label>
     <Label row="1" text="This is the supplementary column." class="text-center"></Label>
   </GridLayout>`,
-  standalone: true,
   imports: [NativeScriptCommonModule],
   schemas: [NO_ERRORS_SCHEMA],
 })

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

@@ -10,11 +10,11 @@ export const SPLIT_VIEW_ROUTES: Routes = [
     path: '',
     component: SplitViewDemoComponent,
     children: [
-      {
-        path: '',
-        redirectTo: '/split-view-demo/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
-        pathMatch: 'full',
-      },
+      // {
+      //   path: '',
+      //   redirectTo: '/(primary:primary//secondary:secondary//supplementary:supplementary//inspector:inspector)',
+      //   pathMatch: 'full',
+      // },
       {
         path: 'primary',
         component: SplitViewPrimaryComponent,

apps/nativescript-demo-ng/src/main.ts

@@ -9,9 +9,11 @@ import { Trace, Utils } from '@nativescript/core';
 
 // import { AppModule } from './app/app.module';
 import { withInterceptorsFromDi } from '@angular/common/http';
-import { AppComponent } from './app/app.component';
-import { routes } from './app/app.routes';
+// import { AppComponent } from './app/app.component';
+// import { routes } from './app/app.routes';
 import { provideZonelessChangeDetection } from '@angular/core';
+import { SPLIT_VIEW_ROUTES } from './app/split-view-demo/split-view.routes';
+import { SplitViewDemoComponent } from './app/split-view-demo/split-view-demo.component';
 
 const ZONELESS = true;
 
@@ -23,10 +25,10 @@ runNativeScriptAngularApp({
     if (__APPLE__) {
       Utils.ios.setWindowBackgroundColor('#a6120d');
     }
-    return bootstrapApplication(AppComponent, {
+    return bootstrapApplication(SplitViewDemoComponent, {
       providers: [
         provideNativeScriptHttpClient(withInterceptorsFromDi()),
-        provideNativeScriptRouter(routes),
+        provideNativeScriptRouter(SPLIT_VIEW_ROUTES),
         ZONELESS ? provideZonelessChangeDetection() : provideNativeScriptNgZone(),
       ],
     });