From e2140be2b8162e9c3a8422a2f84277308d41fe17 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 10:53:15 +0200
Subject: [PATCH 1/8] feat: init angular setup

---
 src/app/contacts/add/add.component.css       |  0
 src/app/contacts/add/add.component.html      |  1 +
 src/app/contacts/add/add.component.spec.ts   | 23 ++++++++++++++++++++
 src/app/contacts/add/add.component.ts        | 12 ++++++++++
 src/app/contacts/contacts-service.service.ts |  9 ++++++++
 src/app/contacts/contacts.module.ts          | 12 ++++++++++
 src/app/contacts/list/list.component.css     |  0
 src/app/contacts/list/list.component.html    |  1 +
 src/app/contacts/list/list.component.spec.ts | 23 ++++++++++++++++++++
 src/app/contacts/list/list.component.ts      | 12 ++++++++++
 src/app/contacts/view/view.component.css     |  0
 src/app/contacts/view/view.component.html    |  1 +
 src/app/contacts/view/view.component.spec.ts | 23 ++++++++++++++++++++
 src/app/contacts/view/view.component.ts      | 12 ++++++++++
 src/app/data/contacts.ts                     | 18 +++++++++++++++
 src/app/models/contact.ts                    |  7 ++++++
 16 files changed, 154 insertions(+)
 create mode 100644 src/app/contacts/add/add.component.css
 create mode 100644 src/app/contacts/add/add.component.html
 create mode 100644 src/app/contacts/add/add.component.spec.ts
 create mode 100644 src/app/contacts/add/add.component.ts
 create mode 100644 src/app/contacts/contacts-service.service.ts
 create mode 100644 src/app/contacts/contacts.module.ts
 create mode 100644 src/app/contacts/list/list.component.css
 create mode 100644 src/app/contacts/list/list.component.html
 create mode 100644 src/app/contacts/list/list.component.spec.ts
 create mode 100644 src/app/contacts/list/list.component.ts
 create mode 100644 src/app/contacts/view/view.component.css
 create mode 100644 src/app/contacts/view/view.component.html
 create mode 100644 src/app/contacts/view/view.component.spec.ts
 create mode 100644 src/app/contacts/view/view.component.ts
 create mode 100644 src/app/data/contacts.ts
 create mode 100644 src/app/models/contact.ts

diff --git a/src/app/contacts/add/add.component.css b/src/app/contacts/add/add.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/add/add.component.html b/src/app/contacts/add/add.component.html
new file mode 100644
index 00000000..fa723f3a
--- /dev/null
+++ b/src/app/contacts/add/add.component.html
@@ -0,0 +1 @@
+<p>add works!</p>
diff --git a/src/app/contacts/add/add.component.spec.ts b/src/app/contacts/add/add.component.spec.ts
new file mode 100644
index 00000000..f4528470
--- /dev/null
+++ b/src/app/contacts/add/add.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComponent } from './add.component';
+
+describe('AddComponent', () => {
+  let component: AddComponent;
+  let fixture: ComponentFixture<AddComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/contacts/add/add.component.ts b/src/app/contacts/add/add.component.ts
new file mode 100644
index 00000000..385416f1
--- /dev/null
+++ b/src/app/contacts/add/add.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-add',
+  standalone: true,
+  imports: [],
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+
+}
diff --git a/src/app/contacts/contacts-service.service.ts b/src/app/contacts/contacts-service.service.ts
new file mode 100644
index 00000000..3f15143d
--- /dev/null
+++ b/src/app/contacts/contacts-service.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsServiceService {
+
+  constructor() { }
+}
diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
new file mode 100644
index 00000000..942de8c0
--- /dev/null
+++ b/src/app/contacts/contacts.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class ContactsModule { }
diff --git a/src/app/contacts/list/list.component.css b/src/app/contacts/list/list.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
new file mode 100644
index 00000000..7c1fe159
--- /dev/null
+++ b/src/app/contacts/list/list.component.html
@@ -0,0 +1 @@
+<p>list works!</p>
diff --git a/src/app/contacts/list/list.component.spec.ts b/src/app/contacts/list/list.component.spec.ts
new file mode 100644
index 00000000..b602c867
--- /dev/null
+++ b/src/app/contacts/list/list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/contacts/list/list.component.ts b/src/app/contacts/list/list.component.ts
new file mode 100644
index 00000000..789f6d75
--- /dev/null
+++ b/src/app/contacts/list/list.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-list',
+  standalone: true,
+  imports: [],
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+
+}
diff --git a/src/app/contacts/view/view.component.css b/src/app/contacts/view/view.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/view/view.component.html b/src/app/contacts/view/view.component.html
new file mode 100644
index 00000000..48dbfee6
--- /dev/null
+++ b/src/app/contacts/view/view.component.html
@@ -0,0 +1 @@
+<p>view works!</p>
diff --git a/src/app/contacts/view/view.component.spec.ts b/src/app/contacts/view/view.component.spec.ts
new file mode 100644
index 00000000..380ab164
--- /dev/null
+++ b/src/app/contacts/view/view.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewComponent } from './view.component';
+
+describe('ViewComponent', () => {
+  let component: ViewComponent;
+  let fixture: ComponentFixture<ViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/contacts/view/view.component.ts b/src/app/contacts/view/view.component.ts
new file mode 100644
index 00000000..b9d123db
--- /dev/null
+++ b/src/app/contacts/view/view.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-view',
+  standalone: true,
+  imports: [],
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+
+}
diff --git a/src/app/data/contacts.ts b/src/app/data/contacts.ts
new file mode 100644
index 00000000..84f31655
--- /dev/null
+++ b/src/app/data/contacts.ts
@@ -0,0 +1,18 @@
+import { Contact } from '../models/contact';
+
+export const CONTACTS: Contact[] = [
+  {
+    id: 1,
+    firstName: 'Florian',
+    lastName: 'Berg',
+    street: 'Pavington 5',
+    city: 'Chelsea',
+  },
+  {
+    id: 2,
+    firstName: 'Adam',
+    lastName: 'Mayer',
+    street: 'Langgata 12',
+    city: 'Sandnes',
+  },
+];
diff --git a/src/app/models/contact.ts b/src/app/models/contact.ts
new file mode 100644
index 00000000..f132cd4b
--- /dev/null
+++ b/src/app/models/contact.ts
@@ -0,0 +1,7 @@
+export interface Contact {
+  id: number | null;
+  firstName: string;
+  lastName: string;
+  street: string;
+  city: string;
+}

From 08ba6e57e488e93f36b7e5f6e82c3903189dcad7 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 11:32:30 +0200
Subject: [PATCH 2/8] feat: contact list

---
 src/app/app-routing.module.ts                | 13 ++++++++++---
 src/app/app.module.ts                        |  4 +++-
 src/app/contacts/add/add.component.ts        |  9 +++------
 src/app/contacts/contacts-service.service.ts |  9 ---------
 src/app/contacts/contacts.module.ts          | 16 +++++++++-------
 src/app/contacts/contacts.service.ts         | 19 +++++++++++++++++++
 src/app/contacts/list/list.component.html    | 15 ++++++++++++++-
 src/app/contacts/list/list.component.ts      | 13 +++++++++----
 src/app/contacts/view/view.component.ts      |  9 +++------
 src/app/layout/menu/menu.component.html      |  2 +-
 10 files changed, 71 insertions(+), 38 deletions(-)
 delete mode 100644 src/app/contacts/contacts-service.service.ts
 create mode 100644 src/app/contacts/contacts.service.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627..5bb5d652 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ListComponent } from './contacts/list/list.component';
+import { AddComponent } from './contacts/add/add.component';
+import { ViewComponent } from './contacts/view/view.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'contacts', component: ListComponent },
+  { path: 'contacts/add', component: AddComponent },
+  { path: 'contacts/:id', component: ViewComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8207184c..82538837 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,9 +5,11 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
 
+import { ContactsModule } from './contacts/contacts.module';
+
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, ContactsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/src/app/contacts/add/add.component.ts b/src/app/contacts/add/add.component.ts
index 385416f1..c526fca8 100644
--- a/src/app/contacts/add/add.component.ts
+++ b/src/app/contacts/add/add.component.ts
@@ -2,11 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-add',
-  standalone: true,
-  imports: [],
+  standalone: false,
   templateUrl: './add.component.html',
-  styleUrl: './add.component.css'
+  styleUrl: './add.component.css',
 })
-export class AddComponent {
-
-}
+export class AddComponent {}
diff --git a/src/app/contacts/contacts-service.service.ts b/src/app/contacts/contacts-service.service.ts
deleted file mode 100644
index 3f15143d..00000000
--- a/src/app/contacts/contacts-service.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ContactsServiceService {
-
-  constructor() { }
-}
diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
index 942de8c0..e63f7ee2 100644
--- a/src/app/contacts/contacts.module.ts
+++ b/src/app/contacts/contacts.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
-
+import { ListComponent } from './list/list.component';
+import { AddComponent } from './add/add.component';
+import { ViewComponent } from './view/view.component';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ]
+  declarations: [ListComponent, AddComponent, ViewComponent],
+  imports: [CommonModule],
+  exports: [AddComponent, ListComponent, ViewComponent],
 })
-export class ContactsModule { }
+export class ContactsModule {}
diff --git a/src/app/contacts/contacts.service.ts b/src/app/contacts/contacts.service.ts
new file mode 100644
index 00000000..4aba6f73
--- /dev/null
+++ b/src/app/contacts/contacts.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Contact } from '../models/contact';
+import { CONTACTS } from '../data/contacts';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactsService {
+  public contacts: Contact[] = CONTACTS;
+
+  public AddContact(contact: Contact): void {
+    this.contacts.push(contact);
+  }
+  GetContactById(id: number): Observable<Contact | undefined> {
+    const contact = this.contacts.find((b) => b.id === id);
+    return of(contact);
+  }
+}
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
index 7c1fe159..dc57aa29 100644
--- a/src/app/contacts/list/list.component.html
+++ b/src/app/contacts/list/list.component.html
@@ -1 +1,14 @@
-<p>list works!</p>
+<h1>Contacts</h1>
+<!-- if we have contacts -->
+<div *ngIf="contacts.length > 0">
+  <div *ngFor="let contact of contacts">
+    <div class="contact-container">
+      <div class="contact">
+        <span>{{ contact.firstName }} {{ contact.lastName }}</span>
+        <a>View</a>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- if we don't have contacts -->
+<div *ngIf="contacts.length === 0">No contacts yet</div>
diff --git a/src/app/contacts/list/list.component.ts b/src/app/contacts/list/list.component.ts
index 789f6d75..1352c52f 100644
--- a/src/app/contacts/list/list.component.ts
+++ b/src/app/contacts/list/list.component.ts
@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
+import { Contact } from '../../models/contact';
+import { ContactsService } from '../contacts.service';
+import { Injectable } from '@angular/core';
 
 @Component({
   selector: 'app-list',
-  standalone: true,
-  imports: [],
+  standalone: false,
   templateUrl: './list.component.html',
-  styleUrl: './list.component.css'
+  styleUrl: './list.component.css',
 })
 export class ListComponent {
-
+  contacts: Contact[] = [];
+  constructor(private readonly contactService: ContactsService) {
+    this.contacts = this.contactService.contacts;
+  }
 }
diff --git a/src/app/contacts/view/view.component.ts b/src/app/contacts/view/view.component.ts
index b9d123db..4888e35d 100644
--- a/src/app/contacts/view/view.component.ts
+++ b/src/app/contacts/view/view.component.ts
@@ -2,11 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-view',
-  standalone: true,
-  imports: [],
+  standalone: false,
   templateUrl: './view.component.html',
-  styleUrl: './view.component.css'
+  styleUrl: './view.component.css',
 })
-export class ViewComponent {
-
-}
+export class ViewComponent {}
diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html
index 7c5ec7a2..5e7d60b8 100644
--- a/src/app/layout/menu/menu.component.html
+++ b/src/app/layout/menu/menu.component.html
@@ -1,5 +1,5 @@
 <h2>Menu</h2>
 <ul>
-  <li><a>Contacts list</a></li>
+  <li><a routerLink="/contacts">Contacts list</a></li>
   <li><a>Add new contact</a></li>
 </ul>

From 487d9a8c6ad3d0911908f4d5dc809be136028155 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 11:47:28 +0200
Subject: [PATCH 3/8] feat: contact view page

---
 src/app/contacts/contacts.module.ts       |  2 +-
 src/app/contacts/list/list.component.html |  4 +++-
 src/app/contacts/view/view.component.html | 11 ++++++++++-
 src/app/contacts/view/view.component.ts   | 22 ++++++++++++++++++++--
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
index e63f7ee2..d7640e23 100644
--- a/src/app/contacts/contacts.module.ts
+++ b/src/app/contacts/contacts.module.ts
@@ -8,7 +8,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [ListComponent, AddComponent, ViewComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
   exports: [AddComponent, ListComponent, ViewComponent],
 })
 export class ContactsModule {}
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
index dc57aa29..76d8ade1 100644
--- a/src/app/contacts/list/list.component.html
+++ b/src/app/contacts/list/list.component.html
@@ -5,7 +5,9 @@ <h1>Contacts</h1>
     <div class="contact-container">
       <div class="contact">
         <span>{{ contact.firstName }} {{ contact.lastName }}</span>
-        <a>View</a>
+        <a routerLink="/contacts/{{ contact.id }}" class="btn btn-primary">
+          View
+        </a>
       </div>
     </div>
   </div>
diff --git a/src/app/contacts/view/view.component.html b/src/app/contacts/view/view.component.html
index 48dbfee6..2bdc652c 100644
--- a/src/app/contacts/view/view.component.html
+++ b/src/app/contacts/view/view.component.html
@@ -1 +1,10 @@
-<p>view works!</p>
+<div *ngIf="contact; else loading">
+  <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
+  <p>{{ contact.street }}, {{ contact.city }}</p>
+</div>
+
+<ng-template #loading>
+  <ng-container>
+    <h1>Contact not found</h1>
+  </ng-container>
+</ng-template>
diff --git a/src/app/contacts/view/view.component.ts b/src/app/contacts/view/view.component.ts
index 4888e35d..dd6c5ce8 100644
--- a/src/app/contacts/view/view.component.ts
+++ b/src/app/contacts/view/view.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ContactsService } from '../contacts.service';
+import { ActivatedRoute } from '@angular/router';
+import { Contact } from '../../models/contact';
 
 @Component({
   selector: 'app-view',
@@ -6,4 +9,19 @@ import { Component } from '@angular/core';
   templateUrl: './view.component.html',
   styleUrl: './view.component.css',
 })
-export class ViewComponent {}
+export class ViewComponent implements OnInit {
+  contact: Contact | null = null;
+  contactId: number | null = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private contactService: ContactsService
+  ) {}
+
+  ngOnInit(): void {
+    this.contactId = Number(this.route.snapshot.paramMap.get('id'));
+    this.contactService.GetContactById(this.contactId).subscribe((data) => {
+      this.contact = data!;
+    });
+  }
+}

From 721646af47c513a30be794857f73593d7a817097 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 12:47:22 +0200
Subject: [PATCH 4/8] feat: add contact

---
 src/app/contacts/add/add.component.html | 53 ++++++++++++++++++++++++-
 src/app/contacts/add/add.component.ts   | 32 ++++++++++++++-
 src/app/layout/menu/menu.component.html |  2 +-
 3 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/src/app/contacts/add/add.component.html b/src/app/contacts/add/add.component.html
index fa723f3a..ede25f63 100644
--- a/src/app/contacts/add/add.component.html
+++ b/src/app/contacts/add/add.component.html
@@ -1 +1,52 @@
-<p>add works!</p>
+<div>
+  <h2>Add Beer</h2>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()" class="form-group">
+    <div>
+      <label for="firstName" class="form-control">First Name:</label>
+      <input
+        type="text"
+        id="firstName"
+        formControlName="firstName"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="lastName" class="form-control">last Name:</label>
+      <input
+        type="text"
+        id="lastName"
+        formControlName="lastName"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="street" class="form-control">Street:</label>
+      <input
+        type="text"
+        id="street"
+        formControlName="street"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="city" class="form-control">City:</label>
+      <input
+        type="text"
+        id="city"
+        formControlName="city"
+        class="form-control"
+      />
+    </div>
+
+    <button
+      type="submit"
+      [disabled]="contactForm.invalid"
+      class="btn btn-success"
+    >
+      Add Contact
+    </button>
+  </form>
+</div>
diff --git a/src/app/contacts/add/add.component.ts b/src/app/contacts/add/add.component.ts
index c526fca8..ca8425af 100644
--- a/src/app/contacts/add/add.component.ts
+++ b/src/app/contacts/add/add.component.ts
@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ContactsService } from '../contacts.service';
+import { Contact } from '../../models/contact';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-add',
@@ -6,4 +10,30 @@ import { Component } from '@angular/core';
   templateUrl: './add.component.html',
   styleUrl: './add.component.css',
 })
-export class AddComponent {}
+export class AddComponent {
+  contactForm: FormGroup;
+  constructor(
+    private readonly formBuilder: FormBuilder,
+    private readonly contactService: ContactsService,
+    private readonly router: Router
+  ) {
+    this.contactForm = this.formBuilder.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required],
+    });
+  }
+  addContact(): void {
+    const newContact: Contact = {
+      id: 0,
+      firstName: this.contactForm.value.firstName,
+      lastName: this.contactForm.value.lastName,
+      street: this.contactForm.value.street,
+      city: this.contactForm.value.city,
+    };
+    this.contactService.AddContact(newContact);
+    this.contactForm.reset();
+    this.router.navigate(['/contacts']);
+  }
+}
diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html
index 5e7d60b8..aed3259d 100644
--- a/src/app/layout/menu/menu.component.html
+++ b/src/app/layout/menu/menu.component.html
@@ -1,5 +1,5 @@
 <h2>Menu</h2>
 <ul>
   <li><a routerLink="/contacts">Contacts list</a></li>
-  <li><a>Add new contact</a></li>
+  <li><a routerLink="/contacts/add">Add new contact</a></li>
 </ul>

From d6cc3467c403ca24fb481f7eb7c417a39b29b15d Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 12:53:57 +0200
Subject: [PATCH 5/8] fix: id overlap

---
 src/app/contacts/contacts.service.ts | 8 +++++++-
 src/app/data/contacts.ts             | 4 ++--
 src/app/models/contact.ts            | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/contacts/contacts.service.ts b/src/app/contacts/contacts.service.ts
index 4aba6f73..62be97d1 100644
--- a/src/app/contacts/contacts.service.ts
+++ b/src/app/contacts/contacts.service.ts
@@ -10,7 +10,13 @@ export class ContactsService {
   public contacts: Contact[] = CONTACTS;
 
   public AddContact(contact: Contact): void {
-    this.contacts.push(contact);
+    const maxId =
+      this.contacts.length > 0
+        ? Math.max(...this.contacts.map((c) => c.id))
+        : 0;
+
+    const newContact = { ...contact, id: maxId + 1 };
+    this.contacts.push(newContact);
   }
   GetContactById(id: number): Observable<Contact | undefined> {
     const contact = this.contacts.find((b) => b.id === id);
diff --git a/src/app/data/contacts.ts b/src/app/data/contacts.ts
index 84f31655..45e36d17 100644
--- a/src/app/data/contacts.ts
+++ b/src/app/data/contacts.ts
@@ -2,14 +2,14 @@ import { Contact } from '../models/contact';
 
 export const CONTACTS: Contact[] = [
   {
-    id: 1,
+    id: 0,
     firstName: 'Florian',
     lastName: 'Berg',
     street: 'Pavington 5',
     city: 'Chelsea',
   },
   {
-    id: 2,
+    id: 1,
     firstName: 'Adam',
     lastName: 'Mayer',
     street: 'Langgata 12',
diff --git a/src/app/models/contact.ts b/src/app/models/contact.ts
index f132cd4b..e4f470d2 100644
--- a/src/app/models/contact.ts
+++ b/src/app/models/contact.ts
@@ -1,5 +1,5 @@
 export interface Contact {
-  id: number | null;
+  id: number;
   firstName: string;
   lastName: string;
   street: string;

From 6b2bb8a02571aa23e06f32ff93f910d7fcf8818d Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 13:41:20 +0200
Subject: [PATCH 6/8] feat: editing contact

---
 src/app/app-routing.module.ts                |  2 +
 src/app/contacts/contacts.module.ts          |  6 ++-
 src/app/contacts/contacts.service.ts         |  8 ++-
 src/app/contacts/edit/edit.component.css     |  0
 src/app/contacts/edit/edit.component.html    | 56 ++++++++++++++++++++
 src/app/contacts/edit/edit.component.spec.ts | 23 ++++++++
 src/app/contacts/edit/edit.component.ts      | 56 ++++++++++++++++++++
 src/app/contacts/list/list.component.html    |  3 ++
 8 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 src/app/contacts/edit/edit.component.css
 create mode 100644 src/app/contacts/edit/edit.component.html
 create mode 100644 src/app/contacts/edit/edit.component.spec.ts
 create mode 100644 src/app/contacts/edit/edit.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5bb5d652..8a755f82 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { ListComponent } from './contacts/list/list.component';
 import { AddComponent } from './contacts/add/add.component';
 import { ViewComponent } from './contacts/view/view.component';
+import { EditComponent } from './contacts/edit/edit.component';
 
 const routes: Routes = [
   { path: 'contacts', component: ListComponent },
   { path: 'contacts/add', component: AddComponent },
   { path: 'contacts/:id', component: ViewComponent },
+  { path: 'contacts/edit/:id', component: EditComponent },
 ];
 
 @NgModule({
diff --git a/src/app/contacts/contacts.module.ts b/src/app/contacts/contacts.module.ts
index d7640e23..c6cdab31 100644
--- a/src/app/contacts/contacts.module.ts
+++ b/src/app/contacts/contacts.module.ts
@@ -6,9 +6,11 @@ import { ViewComponent } from './view/view.component';
 import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
 
+import { EditComponent } from './edit/edit.component';
+
 @NgModule({
-  declarations: [ListComponent, AddComponent, ViewComponent],
+  declarations: [ListComponent, AddComponent, ViewComponent, EditComponent],
   imports: [CommonModule, ReactiveFormsModule, RouterModule],
-  exports: [AddComponent, ListComponent, ViewComponent],
+  exports: [AddComponent, ListComponent, ViewComponent, EditComponent],
 })
 export class ContactsModule {}
diff --git a/src/app/contacts/contacts.service.ts b/src/app/contacts/contacts.service.ts
index 62be97d1..64c49055 100644
--- a/src/app/contacts/contacts.service.ts
+++ b/src/app/contacts/contacts.service.ts
@@ -19,7 +19,13 @@ export class ContactsService {
     this.contacts.push(newContact);
   }
   GetContactById(id: number): Observable<Contact | undefined> {
-    const contact = this.contacts.find((b) => b.id === id);
+    const contact = this.contacts.find((c) => c.id === id);
     return of(contact);
   }
+  public UpdateContact(updatedContact: Contact): void {
+    const index = this.contacts.findIndex((c) => c.id === updatedContact.id);
+    if (index !== -1) {
+      this.contacts[index] = updatedContact;
+    }
+  }
 }
diff --git a/src/app/contacts/edit/edit.component.css b/src/app/contacts/edit/edit.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/edit/edit.component.html b/src/app/contacts/edit/edit.component.html
new file mode 100644
index 00000000..b1380ed5
--- /dev/null
+++ b/src/app/contacts/edit/edit.component.html
@@ -0,0 +1,56 @@
+<div>
+  <h2>Edit Contact</h2>
+  <form
+    [formGroup]="contactForm"
+    (ngSubmit)="updateContact()"
+    class="form-group"
+  >
+    <div>
+      <label for="firstName" class="form-control">First Name:</label>
+      <input
+        type="text"
+        id="firstName"
+        formControlName="firstName"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="lastName" class="form-control">Last Name:</label>
+      <input
+        type="text"
+        id="lastName"
+        formControlName="lastName"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="street" class="form-control">Street:</label>
+      <input
+        type="text"
+        id="street"
+        formControlName="street"
+        class="form-control"
+      />
+    </div>
+
+    <div>
+      <label for="city" class="form-control">City:</label>
+      <input
+        type="text"
+        id="city"
+        formControlName="city"
+        class="form-control"
+      />
+    </div>
+
+    <button
+      type="submit"
+      [disabled]="contactForm.invalid"
+      class="btn btn-primary"
+    >
+      Save Changes
+    </button>
+  </form>
+</div>
diff --git a/src/app/contacts/edit/edit.component.spec.ts b/src/app/contacts/edit/edit.component.spec.ts
new file mode 100644
index 00000000..6676ccfd
--- /dev/null
+++ b/src/app/contacts/edit/edit.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditComponent } from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/contacts/edit/edit.component.ts b/src/app/contacts/edit/edit.component.ts
new file mode 100644
index 00000000..177456b9
--- /dev/null
+++ b/src/app/contacts/edit/edit.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContactsService } from '../contacts.service';
+import { Contact } from '../../models/contact';
+
+@Component({
+  selector: 'app-edit',
+  standalone: false,
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css'],
+})
+export class EditComponent implements OnInit {
+  contactForm: FormGroup;
+  contactId!: number;
+
+  constructor(
+    private readonly fb: FormBuilder,
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly contactService: ContactsService
+  ) {
+    this.contactForm = this.fb.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required],
+    });
+  }
+
+  ngOnInit(): void {
+    this.contactId = Number(this.route.snapshot.paramMap.get('id'));
+    const contact = this.contactService.contacts.find(
+      (c) => c.id === this.contactId
+    );
+
+    if (contact) {
+      this.contactForm.patchValue({
+        firstName: contact.firstName,
+        lastName: contact.lastName,
+        street: contact.street,
+        city: contact.city,
+      });
+    }
+  }
+
+  updateContact(): void {
+    const updatedContact: Contact = {
+      id: this.contactId,
+      ...this.contactForm.value,
+    };
+
+    this.contactService.UpdateContact(updatedContact);
+    this.router.navigate(['/contacts']);
+  }
+}
diff --git a/src/app/contacts/list/list.component.html b/src/app/contacts/list/list.component.html
index 76d8ade1..f02e64ef 100644
--- a/src/app/contacts/list/list.component.html
+++ b/src/app/contacts/list/list.component.html
@@ -8,6 +8,9 @@ <h1>Contacts</h1>
         <a routerLink="/contacts/{{ contact.id }}" class="btn btn-primary">
           View
         </a>
+        <a routerLink="/contacts/edit/{{ contact.id }}" class="btn btn-primary">
+          Edit
+        </a>
       </div>
     </div>
   </div>

From c6406b46da3b2599b0cecfecfeaffbdbcb8ee7b4 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 13:51:23 +0200
Subject: [PATCH 7/8] feat: styling

---
 src/app/contacts/add/add.component.css   | 25 ++++++++++++++++++++++++
 src/app/contacts/edit/edit.component.css | 25 ++++++++++++++++++++++++
 src/app/contacts/list/list.component.css | 11 +++++++++++
 3 files changed, 61 insertions(+)

diff --git a/src/app/contacts/add/add.component.css b/src/app/contacts/add/add.component.css
index e69de29b..04068da6 100644
--- a/src/app/contacts/add/add.component.css
+++ b/src/app/contacts/add/add.component.css
@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: 40vw;
+  flex-direction: column;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5em;
+}
+
+label {
+  font-weight: bold;
+}
+
+.actions {
+  display: flex;
+}
+
+.spacer {
+  flex: 1;
+}
diff --git a/src/app/contacts/edit/edit.component.css b/src/app/contacts/edit/edit.component.css
index e69de29b..04068da6 100644
--- a/src/app/contacts/edit/edit.component.css
+++ b/src/app/contacts/edit/edit.component.css
@@ -0,0 +1,25 @@
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: 40vw;
+  flex-direction: column;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.5em;
+}
+
+label {
+  font-weight: bold;
+}
+
+.actions {
+  display: flex;
+}
+
+.spacer {
+  flex: 1;
+}
diff --git a/src/app/contacts/list/list.component.css b/src/app/contacts/list/list.component.css
index e69de29b..a7943571 100644
--- a/src/app/contacts/list/list.component.css
+++ b/src/app/contacts/list/list.component.css
@@ -0,0 +1,11 @@
+:host {
+  padding: 0.5em;
+  width: 400px;
+}
+
+.contact {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ddd;
+  padding: 0.5em 0;
+}

From 04dcbcc2262f91e87c46465e4c5b09e61c006ef8 Mon Sep 17 00:00:00 2001
From: Jakub Mroz <kuba.mroz01@gmail.com>
Date: Mon, 8 Sep 2025 14:04:25 +0200
Subject: [PATCH 8/8] fix: not found if wrong edit id url

---
 src/app/contacts/edit/edit.component.html |  8 +++++++-
 src/app/contacts/edit/edit.component.ts   | 17 +++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/contacts/edit/edit.component.html b/src/app/contacts/edit/edit.component.html
index b1380ed5..e1ccabec 100644
--- a/src/app/contacts/edit/edit.component.html
+++ b/src/app/contacts/edit/edit.component.html
@@ -1,4 +1,4 @@
-<div>
+<div *ngIf="contact; else loading">
   <h2>Edit Contact</h2>
   <form
     [formGroup]="contactForm"
@@ -54,3 +54,9 @@ <h2>Edit Contact</h2>
     </button>
   </form>
 </div>
+
+<ng-template #loading>
+  <ng-container>
+    <h1>Contact not found</h1>
+  </ng-container>
+</ng-template>
diff --git a/src/app/contacts/edit/edit.component.ts b/src/app/contacts/edit/edit.component.ts
index 177456b9..81640970 100644
--- a/src/app/contacts/edit/edit.component.ts
+++ b/src/app/contacts/edit/edit.component.ts
@@ -13,6 +13,7 @@ import { Contact } from '../../models/contact';
 export class EditComponent implements OnInit {
   contactForm: FormGroup;
   contactId!: number;
+  contact: Contact | null = null;
 
   constructor(
     private readonly fb: FormBuilder,
@@ -30,16 +31,16 @@ export class EditComponent implements OnInit {
 
   ngOnInit(): void {
     this.contactId = Number(this.route.snapshot.paramMap.get('id'));
-    const contact = this.contactService.contacts.find(
-      (c) => c.id === this.contactId
-    );
+    this.contactService.GetContactById(this.contactId).subscribe((data) => {
+      this.contact = data!;
+    });
 
-    if (contact) {
+    if (this.contact) {
       this.contactForm.patchValue({
-        firstName: contact.firstName,
-        lastName: contact.lastName,
-        street: contact.street,
-        city: contact.city,
+        firstName: this.contact.firstName,
+        lastName: this.contact.lastName,
+        street: this.contact.street,
+        city: this.contact.city,
       });
     }
   }