V21

README.md

@@ -87,3 +87,9 @@ The project uses [Tailwind CSS](https://starlight.astro.build/guides/css-and-tai
 ## 📖 Content Management
 
 Tutorials are written in Markdown (`.mdx`) files located in `src/content/docs/`. Each file is automatically exposed as a route based on its file name. Images can be added to `src/assets/` and embedded in Markdown with relative links.
+
+
+## note
+
+The content is a complete step of an 'angular introduction course'
+do not include code snippets, focus on the concepts, do not dive into instructions, just describe the concepts.

astro.config.mjs

@@ -18,14 +18,11 @@ export default defineConfig({
           label: "GitHub",
           href: "https://github.com/angular-courses-lab/angular-tutorials",
         },
-        {
-          icon: "comment",
-          label: "AI RAG Assistant",
-          href: "https://www.dolmen.tools/en/angular/angie/chat",
-        },
       ],
       components: {
         Header: "./src/components/ui/CustomHeader.astro",
+        PageTitle: "./src/components/ui/CustomPageTitle.astro",
+        Head: "./src/components/ui/CustomHead.astro",
       },
       sidebar: [
         {
@@ -65,16 +62,24 @@ export default defineConfig({
               link: "/task-listing/components-introduction",
             },
             {
-              label: "Create First Component",
-              link: "/task-listing/create-first-component",
+              label: "Generate an Angular Component",
+              link: "/task-listing/generate-component",
+            },
+            {
+              label: "Display the Component",
+              link: "/task-listing/display-component",
             },
             {
-              label: "Task Interface",
-              link: "/task-listing/task-interface",
+              label: "TypeScript Interface",
+              link: "/task-listing/typescript-interface",
             },
             {
-              label: "Display List",
-              link: "/task-listing/display-list",
+              label: "Signals Introduction",
+              link: "/task-listing/signals-introduction",
+            },
+            {
+              label: "Control Flow",
+              link: "/task-listing/control-flow",
             },
             {
               label: "Interpolation",
@@ -102,16 +107,16 @@ export default defineConfig({
               link: "/create-task/html-form",
             },
             {
-              label: "Form Binding",
-              link: "/create-task/form-binding",
+              label: "Reactive Forms",
+              link: "/create-task/reactive-forms",
             },
             {
               label: "Event Binding",
               link: "/create-task/event-binding",
             },
             {
-              label: "Angular Service",
-              link: "/create-task/angular-service",
+              label: "Generate an Angular Service",
+              link: "/create-task/generate-angular-service",
             },
             {
               label: "Dependency Injection",
@@ -126,8 +131,8 @@ export default defineConfig({
               link: "/create-task/inject-service-form",
             },
             {
-              label: "Programmatical Routing",
-              link: "/create-task/programmatical-routing",
+              label: "Router Navigation",
+              link: "/create-task/router-navigation",
             },
             {
               label: "Component Destruction",
@@ -197,8 +202,8 @@ export default defineConfig({
               link: "/reusable-components/delete-all-tasks",
             },
             {
-              label: "Prefill Form",
-              link: "/reusable-components/prefill-form",
+              label: "Update a Reactive Form",
+              link: "/reusable-components/update-reactive-form",
             },
           ],
         },
@@ -210,8 +215,8 @@ export default defineConfig({
               link: "/api-server/json-server-installation",
             },
             {
-              label: "Add HTTP Client",
-              link: "/api-server/add-http-client",
+              label: "Inject HttpClient",
+              link: "/api-server/inject-http-client",
             },
             {
               label: "Retrieve Tasks",
@@ -231,6 +236,10 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: "Congratulations",
+          link: "/congratulations",
+        },
       ],
       customCss: ["./src/styles/global.css"],
       // Set English as the default language for this site.

src/components/ui/CustomHead.astro

@@ -0,0 +1,13 @@
+---
+const { head } = Astro.locals.starlightRoute;
+---
+
+{head.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
+<script
+  async
+  src="https://widget.kapa.ai/kapa-widget.bundle.js"
+  data-website-id="2kefMS9x.o0AJRfewwVd08vhsrXWiqZFPn37g7wsz"
+  data-project-name="angular"
+  data-project-color="#0077a2"
+  data-project-logo="https://tutorials.angular.courses/favicon.svg"
+></script>

src/components/ui/CustomHeader.astro

@@ -5,11 +5,13 @@ import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
 ---
 
 <nav class="flex items-center justify-between">
+  <a class="no-underline hover:underline text-inherit" href="/">
 <h1 class="font-[Geist] text-base lg:text-xl flex items-center">
      <span>tutorials.</span>
     <span class="text-[#02BCFF]">angular.</span>
     <span>courses</span>
 </h1>
+</a>
 <Search />
 <div class="flex items-center gap-6">
     <div class="flex items-center gap-4">

src/components/ui/CustomPageTitle.astro

@@ -0,0 +1,21 @@
+
+<h1 id="_top">{Astro.locals.starlightRoute.entry.data.title}</h1>
+
+<aside class="bg-yellow-100 text-yellow-800 p-4 rounded-lg border border-yellow-300 text-sm mb-4">
+    A new version of the tutorial will be released on <b>November 20th, 2025</b>.
+    The content will be updated to cover the latest changes in Angular v21.
+
+    Either wait for the updated version or finish the tutorial as is.
+</aside>
+
+<style>
+	@layer starlight.core {
+		h1 {
+			margin-top: 1rem;
+			font-size: var(--sl-text-h1);
+			line-height: var(--sl-line-height-headings);
+			font-weight: 600;
+			color: var(--sl-color-white);
+		}
+	}
+</style>

src/components/ui/NotificationCard.tsx

@@ -20,12 +20,14 @@ interface NotificationCardProps {
   state: NotificationState;
   title: string;
   children: React.ReactNode;
+  src: string;
 }
 
 const NotificationCard: React.FC<NotificationCardProps> = ({
   state,
   title,
   children,
+  src,
 }) => {
   const stateConfig = {
     experimental: {
@@ -95,20 +97,25 @@ const NotificationCard: React.FC<NotificationCardProps> = ({
 
   return (
     <div
-      className={`!mt-12 py-4 px-6 ${config.bg} rounded-lg border ${config.border} relative`}
+      className={`${state === "objective" ? "" : "!mt-12"} py-4 px-6 ${
+        config.bg
+      } rounded-lg border ${config.border} relative`}
     >
-      <div className="flex items-center">
-        <Icon className={`w-5 h-5 ${config.iconColor}`} />
-        <span
-          className={`text-lg font-medium ${config.titleText} px-4 py-0.5 rounded-md`}
-        >
-          {title}
-        </span>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Icon className={`w-6 h-6 ${config.iconColor}`} />
+          <span
+            className={`text-lg font-bold ${config.titleText} px-4 py-0.5 rounded-md`}
+          >
+            {title}
+          </span>
+        </div>
+        {src && (
+          <audio className="hidden md:block mt-0" controls src={src}></audio>
+        )}
       </div>
 
-      <div className="space-y-2 text-gray-700 dark:text-gray-300">
-        {children}
-      </div>
+      <div className={`text-gray-700 dark:text-gray-300 mt-0`}>{children}</div>
     </div>
   );
 };

src/content/docs/en/api-server/create-task.mdx

@@ -8,13 +8,8 @@ slug: "api-server-create-task"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Create a task using HTTP Client</strong>
-      <p>Add a task to the list by making an API call to the mock server.</p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Add a task to the list by making an API call to the mock server.
 </NotificationCard>
 
 ## TaskService
@@ -94,8 +89,8 @@ Let's subscribe to the observable using the `subscribe` function.
         @Component({
           selector: 'app-task-form',
           imports: [
-          ReactiveFormsModule,
-          AlertBanner
+            ReactiveFormsModule,
+            AlertBanner
           ],
           templateUrl: './task-form.html',
           styleUrls: ['./task-form.css']
@@ -104,21 +99,19 @@ Let's subscribe to the observable using the `subscribe` function.
           private taskService = inject(TaskService);
           private router = inject(Router);
           private route = inject(ActivatedRoute);
-          private id: string | null = null;
+          private id = this.route.snapshot.paramMap.get('id');
 
           form = new FormGroup({
             title: new FormControl('', [Validators.required]),
             description: new FormControl('', [Validators.minLength(1)])
           });
 
-          ngOnInit() {
-            this.id = this.route.snapshot.paramMap.get("id");
-
-            if (this.id ) {
-             this.form.patchValue(this.taskService.getTask(this.id ));
+          constructor() {
+            if (this.id) {
+              this.form.patchValue(this.taskService.getTask(this.id));
             }
           }
-
+          
         submit() {
             if (this.id) {
                 const existingTask = this.taskService.getTask(id);
@@ -195,13 +188,11 @@ Use this callback function to navigate to the **"/"** route.
 
 1.  Update the `src/app/task-form/task-form.ts` file.
 
-        ```typescript ins={"Update the form submission function": 11-14}
+        ```typescript ins={"Update the form submission function": 9-12}
 
           submit() {
-              const id = this.route.snapshot.paramMap.get('id');
-
-                if (id) {
-                    const existingTask = this.taskService.getTask(id);
+              if (this.id) {
+                    const existingTask = this.taskService.getTask(this.id);
                     this.taskService.updateTask({
                         ...existingTask,
                         ...this.task

src/content/docs/en/api-server/delete-task.mdx

@@ -8,15 +8,8 @@ slug: "api-server-delete-task"
 import { Steps } from '@astrojs/starlight/components';
 import NotificationCard from "../../../../components/ui/NotificationCard";
 
-<NotificationCard state="objective" title="Chapter Objectives">
-  <ul className="list-disc pl-4 space-y-2">
-    <li>
-      <strong>Delete a task using HTTP Client</strong>
-      <p>
-        Delete a task from the list by making an API call to the mock server.
-      </p>
-    </li>
-  </ul>
+<NotificationCard state="objective" title="Chapter Objective">
+  Delete a task from the list by making an API call to the mock server.
 </NotificationCard>
 
 ## TaskService