From 133463adcbb01c6dec52147753f2039b43816847 Mon Sep 17 00:00:00 2001
From: Jakub Kubacki <jakub.kubacki@synergycodes.com>
Date: Mon, 2 Jun 2025 22:02:12 +0200
Subject: [PATCH] Add routing

---
 apps/angular-intro/src/app/app.component.html |  2 ++
 apps/angular-intro/src/app/app.component.ts   |  2 ++
 apps/angular-intro/src/app/app.routes.ts      | 23 ++++++++++++++++++-
 .../src/pages/page-1/page-1.component.ts      |  8 +++++++
 .../src/pages/page-n/page-n.component.ts      | 23 +++++++++++++++++++
 5 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 apps/angular-intro/src/pages/page-1/page-1.component.ts
 create mode 100644 apps/angular-intro/src/pages/page-n/page-n.component.ts

diff --git a/apps/angular-intro/src/app/app.component.html b/apps/angular-intro/src/app/app.component.html
index 1019b30..1a553bd 100644
--- a/apps/angular-intro/src/app/app.component.html
+++ b/apps/angular-intro/src/app/app.component.html
@@ -4,4 +4,6 @@
   <app-counter-with-service />
   <app-counter-with-service />
   <app-counter-with-ngrx />
+  <hr />
+  <router-outlet />
 </div>
diff --git a/apps/angular-intro/src/app/app.component.ts b/apps/angular-intro/src/app/app.component.ts
index 4cc3764..be5efeb 100644
--- a/apps/angular-intro/src/app/app.component.ts
+++ b/apps/angular-intro/src/app/app.component.ts
@@ -2,12 +2,14 @@ import { Component } from '@angular/core';
 import { CounterComponent } from '../components/counter/counter.component';
 import { CounterWithServiceComponent } from '../components/counter-with-service/counter-with-service.component';
 import { CounterWithNgRxComponent } from '../components/counter-with-ngrx/counter-with-ngrx.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   imports: [
+    RouterOutlet,
     CounterComponent,
     CounterWithServiceComponent,
     CounterWithNgRxComponent,
diff --git a/apps/angular-intro/src/app/app.routes.ts b/apps/angular-intro/src/app/app.routes.ts
index 8762dfe..b835f7b 100644
--- a/apps/angular-intro/src/app/app.routes.ts
+++ b/apps/angular-intro/src/app/app.routes.ts
@@ -1,3 +1,24 @@
 import { Route } from '@angular/router';
+import { Page1Component } from '../pages/page-1/page-1.component';
+import { PageNComponent } from '../pages/page-n/page-n.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'page-1',
+    pathMatch: 'full',
+  },
+  {
+    path: 'page-1',
+    component: Page1Component,
+  },
+  {
+    path: 'page-n',
+    redirectTo: 'page-n/1',
+    pathMatch: 'full',
+  },
+  {
+    path: 'page-n/:pageNumber',
+    component: PageNComponent,
+  },
+];
diff --git a/apps/angular-intro/src/pages/page-1/page-1.component.ts b/apps/angular-intro/src/pages/page-1/page-1.component.ts
new file mode 100644
index 0000000..f3b0080
--- /dev/null
+++ b/apps/angular-intro/src/pages/page-1/page-1.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-page-1',
+  template: `<h1>Page 1</h1>`,
+})
+export class Page1Component {}
diff --git a/apps/angular-intro/src/pages/page-n/page-n.component.ts b/apps/angular-intro/src/pages/page-n/page-n.component.ts
new file mode 100644
index 0000000..1be6f8c
--- /dev/null
+++ b/apps/angular-intro/src/pages/page-n/page-n.component.ts
@@ -0,0 +1,23 @@
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'app-page-n',
+  template: `<h1>Page: {{ pageNumber }}</h1>`,
+})
+export class PageNComponent implements OnInit {
+  private readonly route = inject(ActivatedRoute);
+  private readonly destroyRef = inject(DestroyRef);
+
+  pageNumber?: number;
+
+  ngOnInit(): void {
+    this.route.params
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        this.pageNumber = +params['pageNumber'];
+      });
+  }
+}