Merge pull request #4 from angular-courses-lab/v21

V21

Author: geromegrignon

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

@@ -62,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: "Task Interface",
-              link: "/task-listing/task-interface",
+              label: "Display the Component",
+              link: "/task-listing/display-component",
             },
             {
-              label: "Display List",
-              link: "/task-listing/display-list",
+              label: "TypeScript Interface",
+              link: "/task-listing/typescript-interface",
+            },
+            {
+              label: "Signals Introduction",
+              link: "/task-listing/signals-introduction",
+            },
+            {
+              label: "Control Flow",
+              link: "/task-listing/control-flow",
             },
             {
               label: "Interpolation",
@@ -94,37 +102,49 @@ export default defineConfig({
               label: "Routing Introduction",
               link: "/create-task/routing-introduction",
             },
+            {
+              label: "Add router outlet",
+              link: "/create-task/add-router-outlet",
+            },
+            {
+              label: "Define routes",
+              link: "/create-task/define-routes",
+            },
+            {
+              label: "Add router links",
+              link: "/create-task/add-routerlinks",
+            },
             {
               label: "HTML Form",
               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",
               link: "/create-task/dependency-injection",
             },
             {
-              label: "Add Task Service",
-              link: "/create-task/add-task-service",
+              label: "First Service Function",
+              link: "/create-task/add-task-function",
             },
             {
               label: "Inject Service Form",
               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",
@@ -136,12 +156,16 @@ export default defineConfig({
           label: "Update Task",
           items: [
             {
-              label: "Update Task Route",
-              link: "/update-task/update-task-route",
+              label: "Add a new route",
+              link: "/update-task/add-new-route",
             },
             {
-              label: "Update Task Form",
-              link: "/update-task/update-task-form",
+              label: "Retrieve data from the URL",
+              link: "/update-task/retrieve-data-url",
+            },
+            {
+              label: "Form Validation",
+              link: "/update-task/form-validation",
             },
             {
               label: "Submit Update Form",
@@ -194,8 +218,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",
             },
           ],
         },
@@ -207,8 +231,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",
@@ -228,6 +252,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/CustomPageTitle.astro

@@ -1,13 +1,6 @@
 
 <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 {

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/add-http-client.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/create-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