NathanWalker · Sep 1, 2025 · Sep 1, 2025
diff --git a/angular-tutorial/package.json b/angular-tutorial/package.json
@@ -30,31 +30,31 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "dependencies": {
-    "@angular/animations": "~15.1.0",
-    "@angular/common": "~15.1.0",
-    "@angular/compiler": "~15.1.0",
-    "@angular/core": "~15.1.0",
-    "@angular/forms": "~15.1.0",
-    "@angular/platform-browser": "~15.1.0",
-    "@angular/platform-browser-dynamic": "~15.1.0",
-    "@angular/router": "~15.1.0",
-    "@nativescript/angular": "^15.0.0",
-    "@nativescript/core": "~8.4.0",
-    "@nativescript/tailwind": "^2.0.1",
+    "@angular/animations": "~20.2.0",
+    "@angular/common": "~20.2.0",
+    "@angular/compiler": "~20.2.0",
+    "@angular/core": "~20.2.0",
+    "@angular/forms": "~20.2.0",
+    "@angular/platform-browser": "~20.2.0",
+    "@angular/platform-browser-dynamic": "~20.2.0",
+    "@angular/router": "~20.2.0",
+    "@nativescript/angular": "^20.0.0",
+    "@nativescript/core": "~8.9.0",
+    "@nativescript/tailwind": "^2.1.0",
     "@nativescript/theme": "~3.0.1",
-    "rxjs": "^7.5.0",
-    "tailwindcss": "^3.2.4",
-    "zone.js": "~0.11.5"
+    "rxjs": "^7.8.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~15.1.0",
-    "@angular/compiler-cli": "~15.1.0",
-    "@nativescript/android": "~8.4.0",
-    "@nativescript/ios": "~8.4.0",
-    "@nativescript/types": "~8.4.0",
+    "@angular-devkit/build-angular": "~20.2.0",
+    "@angular/compiler-cli": "~20.2.0",
+    "@nativescript/android": "~8.9.0",
+    "@nativescript/ios": "next",
+    "@nativescript/types": "~8.9.0",
     "@nativescript/webpack": "~5.0.0",
-    "@ngtools/webpack": "~15.1.0",
-    "typescript": "~4.8.4"
+    "@ngtools/webpack": "~20.2.0",
+    "tailwindcss": "~3.2.4",
+    "typescript": "~5.8.0"
   },
   "private": "true",
   "readme": "NativeScript Application"

diff --git a/angular-tutorial/src/app.scss → angular-tutorial/src/app.css b/angular-tutorial/src/app.scss → angular-tutorial/src/app.css
@@ -20,34 +20,34 @@ The imported CSS rules must precede all other types of rules.
 /* Place any CSS rules you want to apply on both iOS and Android here.
 This is where the vast majority of your CSS code goes. */
 
-// applied when device is in light mode
-.ns-light {
-  .bg-primary {
-    background-color: #fdfdfd;
-  }
-  .bg-secondary {
-    background-color: #ffffff;
-  }
-  .text-primary {
-    color: #444;
-  }
-  .text-secondary {
-    color: #777;
-  }
+/* applied when device is in light mode */
+.ns-light .bg-primary {
+  background-color: #fdfdfd;
+}
+.ns-light .bg-secondary {
+  background-color: #ffffff;
+  border-width: 1;
+  border-color: #eee;
+}
+.ns-light .text-primary {
+  color: #444;
+}
+.ns-light .text-secondary {
+  color: #777;
 }
 
-// applied when device is in dark mode
-.ns-dark {
-  .bg-primary {
-    background-color: #212121;
-  }
-  .bg-secondary {
-    background-color: #383838;
-  }
-  .text-primary {
-    color: #eee;
-  }
-  .text-secondary {
-    color: #ccc;
-  }
+/* applied when device is in dark mode */
+.ns-dark .bg-primary {
+  background-color: #212121;
+}
+.ns-dark .bg-secondary {
+  background-color: #444444;
+  border-width: 1;
+  border-color: #616161;
+}
+.ns-dark .text-primary {
+  color: #eee;
+}
+.ns-dark .text-secondary {
+  color: #ccc;
 }
diff --git a/angular-tutorial/src/app/app.component.html → angular-tutorial/src/app.html b/angular-tutorial/src/app/app.component.html → angular-tutorial/src/app.html
diff --git a/angular-tutorial/src/app.ts b/angular-tutorial/src/app.ts
@@ -0,0 +1,10 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { PageRouterOutlet } from '@nativescript/angular';
+
+@Component({
+  selector: 'ns-app',
+  templateUrl: './app.html',
+  imports: [PageRouterOutlet],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class App {}
diff --git a/angular-tutorial/src/app/app-routing.module.ts b/angular-tutorial/src/app/app-routing.module.ts
diff --git a/angular-tutorial/src/app/app.component.ts b/angular-tutorial/src/app/app.component.ts
diff --git a/angular-tutorial/src/app/app.module.ts b/angular-tutorial/src/app/app.module.ts
diff --git a/angular-tutorial/src/app/core/index.ts b/angular-tutorial/src/app/core/index.ts
diff --git a/angular-tutorial/src/app/core/models/index.ts b/angular-tutorial/src/app/core/models/index.ts
diff --git a/angular-tutorial/src/app/core/services/index.ts b/angular-tutorial/src/app/core/services/index.ts
diff --git a/angular-tutorial/src/app/features/details/details-routing.module.ts b/angular-tutorial/src/app/features/details/details-routing.module.ts
diff --git a/angular-tutorial/src/app/features/details/details.component.ts b/angular-tutorial/src/app/features/details/details.component.ts
diff --git a/angular-tutorial/src/app/features/details/details.module.ts b/angular-tutorial/src/app/features/details/details.module.ts
diff --git a/angular-tutorial/src/app/features/home/home-routing.module.ts b/angular-tutorial/src/app/features/home/home-routing.module.ts
diff --git a/angular-tutorial/src/app/features/home/home.component.html b/angular-tutorial/src/app/features/home/home.component.html
diff --git a/angular-tutorial/src/app/features/home/home.component.ts b/angular-tutorial/src/app/features/home/home.component.ts
diff --git a/angular-tutorial/src/app/features/home/home.module.ts b/angular-tutorial/src/app/features/home/home.module.ts
diff --git a/...torial/src/app/core/models/flick.model.ts → ...r-tutorial/src/core/models/flick.model.ts b/...torial/src/app/core/models/flick.model.ts → ...r-tutorial/src/core/models/flick.model.ts
diff --git a/...al/src/app/core/services/flick.service.ts → ...torial/src/core/services/flick.service.ts b/...al/src/app/core/services/flick.service.ts → ...torial/src/core/services/flick.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { FlickModel } from "~/app/core/models";
+import { FlickModel } from "~/core/models/flick.model";
 
 @Injectable({
   providedIn: "root"

diff --git a/...p/features/details/details.component.html → ...utorial/src/features/details/details.html b/...p/features/details/details.component.html → ...utorial/src/features/details/details.html
diff --git a/angular-tutorial/src/features/details/details.ts b/angular-tutorial/src/features/details/details.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, inject, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ActivatedRoute } from '@angular/router';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular'
+import { FlickService } from "~/core/services/flick.service";
+import { FlickModel } from "~/core/models/flick.model";
+
+@Component({
+  selector: "ns-details",
+  templateUrl: "details.html",
+  imports: [NativeScriptCommonModule, NativeScriptRouterModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class Details implements OnInit {
+  flickService = inject(FlickService);
+  activatedRoute = inject(ActivatedRoute);
+  flick: FlickModel | undefined = undefined;
+
+  ngOnInit(): void {
+    const id = +this.activatedRoute.snapshot.params.id;
+    if (id) {
+      this.flick = this.flickService.getFlickById(id);
+    }
+  }
+}
diff --git a/angular-tutorial/src/features/home/home.html b/angular-tutorial/src/features/home/home.html
@@ -0,0 +1,40 @@
+<ActionBar title="NativeFlix"></ActionBar>
+
+<ListView
+  height="100%"
+  separatorColor="transparent"
+  [items]="flickService.getFlicks()"
+  (itemTap)="onFlickTap($event)"
+  (itemLoading)="onItemLoading($event)"
+>
+  <ng-template let-item="item">
+    <!-- The item template can only have a single root view container (e.g. GridLayout, StackLayout, etc.)-->
+    <GridLayout
+      height="280"
+      borderRadius="10"
+      class="bg-secondary"
+      rows="*, auto, auto"
+      columns="*"
+      margin="12 10 0 10"
+      padding="0"
+    >
+      <image row="0" margin="0" stretch="aspectFill" [src]="item.image"></image>
+      <label
+        row="1"
+        margin="10 10 0 10"
+        fontWeight="700"
+        class="text-primary"
+        fontSize="18"
+        [text]="item.title"
+      ></label>
+      <label
+        row="2"
+        margin="0 10 10 10"
+        class="text-secondary"
+        fontSize="14"
+        textWrap="true"
+        [text]="item.description"
+      ></label>
+    </GridLayout>
+  </ng-template>
+</ListView>