From eab2061cdbdb8e88b51dee9d1e90f586c5e8851f Mon Sep 17 00:00:00 2001
From: Chrissivert <122440126+Chrissivert@users.noreply.github.com>
Date: Mon, 8 Sep 2025 11:54:52 +0200
Subject: [PATCH 1/4] core and extension

---
 angular.json                                  |  3 ++
 .../add-contact/add-contact.component.css     |  0
 .../add-contact/add-contact.component.html    |  7 +++
 .../add-contact/add-contact.component.ts      | 24 +++++++++
 .../view-contact/view-contact.component.css   |  0
 .../view-contact/view-contact.component.html  | 31 +++++++++++
 .../view-contact/view-contact.component.ts    | 51 +++++++++++++++++++
 src/app/app-routing.module.ts                 |  9 +++-
 src/app/app.component.html                    |  1 +
 src/app/contacts/contacts.component.css       |  0
 src/app/contacts/contacts.component.html      |  9 ++++
 src/app/contacts/contacts.component.ts        | 23 +++++++++
 src/app/contacts/contacts.model.ts            |  8 +++
 src/app/contacts/contacts.service.ts          | 28 ++++++++++
 src/app/layout/menu/menu.component.html       |  4 +-
 15 files changed, 195 insertions(+), 3 deletions(-)
 create mode 100644 src/app/address-book/add-contact/add-contact.component.css
 create mode 100644 src/app/address-book/add-contact/add-contact.component.html
 create mode 100644 src/app/address-book/add-contact/add-contact.component.ts
 create mode 100644 src/app/address-book/view-contact/view-contact.component.css
 create mode 100644 src/app/address-book/view-contact/view-contact.component.html
 create mode 100644 src/app/address-book/view-contact/view-contact.component.ts
 create mode 100644 src/app/contacts/contacts.component.css
 create mode 100644 src/app/contacts/contacts.component.html
 create mode 100644 src/app/contacts/contacts.component.ts
 create mode 100644 src/app/contacts/contacts.model.ts
 create mode 100644 src/app/contacts/contacts.service.ts

diff --git a/angular.json b/angular.json
index 7a4f1ef7..be4c78d3 100644
--- a/angular.json
+++ b/angular.json
@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/app/address-book/add-contact/add-contact.component.css b/src/app/address-book/add-contact/add-contact.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/address-book/add-contact/add-contact.component.html b/src/app/address-book/add-contact/add-contact.component.html
new file mode 100644
index 00000000..85916cda
--- /dev/null
+++ b/src/app/address-book/add-contact/add-contact.component.html
@@ -0,0 +1,7 @@
+<h2>Add New Contact</h2>
+<form (ngSubmit)="addContact()">
+  <input type="text" [(ngModel)]="newContact.name" name="name" placeholder="Name" required>
+  <input type="email" [(ngModel)]="newContact.email" name="email" placeholder="Email" required>
+  <input type="text" [(ngModel)]="newContact.phone" name="phone" placeholder="Phone" required>
+  <button type="submit">Add Contact</button>
+</form>
diff --git a/src/app/address-book/add-contact/add-contact.component.ts b/src/app/address-book/add-contact/add-contact.component.ts
new file mode 100644
index 00000000..e69da488
--- /dev/null
+++ b/src/app/address-book/add-contact/add-contact.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Contact } from 'src/app/contacts/contacts.model';
+import { ContactService } from 'src/app/contacts/contacts.service';
+
+@Component({
+  selector: 'app-add-contact',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './add-contact.component.html',
+  styleUrls: ['./add-contact.component.css']
+})
+export class AddContactComponent {
+  newContact: Contact = { id: 0, name: '', email: '', phone: '' };
+
+  constructor(private contactService: ContactService) {}
+
+  addContact() {
+    this.contactService.addContact(this.newContact);
+    this.newContact = { id: 0, name: '', email: '', phone: '' };
+    alert('Contact added!');
+  }
+}
diff --git a/src/app/address-book/view-contact/view-contact.component.css b/src/app/address-book/view-contact/view-contact.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/address-book/view-contact/view-contact.component.html b/src/app/address-book/view-contact/view-contact.component.html
new file mode 100644
index 00000000..790c5497
--- /dev/null
+++ b/src/app/address-book/view-contact/view-contact.component.html
@@ -0,0 +1,31 @@
+<div *ngIf="contact; else notFound">
+
+  <!-- View Mode -->
+  <div *ngIf="!editMode">
+    <h2>{{ contact.name }}</h2>
+    <p><strong>Email:</strong> {{ contact.email }}</p>
+    <p><strong>Phone:</strong> {{ contact.phone }}</p>
+    <button (click)="toggleEdit()">Edit</button>
+  </div>
+
+  <!-- Edit Mode -->
+  <div *ngIf="editMode">
+    <h2>Edit Contact</h2>
+    <label>Name:</label>
+    <input type="text" [(ngModel)]="contact.name"><br><br>
+
+    <label>Email:</label>
+    <input type="email" [(ngModel)]="contact.email"><br><br>
+
+    <label>Phone:</label>
+    <input type="text" [(ngModel)]="contact.phone"><br><br>
+
+    <button (click)="toggleEdit()">Cancel</button>
+    <button (click)="saveContact()">Save</button>
+  </div>
+
+</div>
+
+<ng-template #notFound>
+  <p>Contact not found.</p>
+</ng-template>
diff --git a/src/app/address-book/view-contact/view-contact.component.ts b/src/app/address-book/view-contact/view-contact.component.ts
new file mode 100644
index 00000000..07d97852
--- /dev/null
+++ b/src/app/address-book/view-contact/view-contact.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ContactService } from 'src/app/contacts/contacts.service';
+import { Contact } from 'src/app/contacts/contacts.model';
+
+@Component({
+  selector: 'app-view-contact',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule],
+  templateUrl: './view-contact.component.html',
+  styleUrls: ['./view-contact.component.css']
+})
+export class ViewContactComponent implements OnInit {
+  contact: Contact | undefined;
+  editMode = false;
+  originalContact: Contact | undefined; 
+
+  constructor(
+    private route: ActivatedRoute,
+    private contactService: ContactService
+  ) {}
+
+  ngOnInit(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.contact = this.contactService.getContacts().find(c => c.id === id);
+  }
+
+  toggleEdit() {
+    if (this.contact) {
+      if (!this.editMode) {
+        this.originalContact = { ...this.contact };
+      } else {
+        if (this.originalContact) this.contact = { ...this.originalContact };
+      }
+      this.editMode = !this.editMode;
+    }
+  }
+
+  saveContact() {
+    if (this.contact) {
+      const index = this.contactService.getContacts().findIndex(c => c.id === this.contact!.id);
+      if (index > -1) {
+        this.contactService.getContacts()[index] = { ...this.contact };
+        alert('Contact updated!');
+        this.editMode = false;
+      }
+    }
+  }
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 02972627..bb6ebd13 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ContactsComponent } from './contacts/contacts.component';
+import { AddContactComponent } from './address-book/add-contact/add-contact.component';
+import { ViewContactComponent } from './address-book/view-contact/view-contact.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'contacts', component: ContactsComponent },
+  { path: 'add-contact', component: AddContactComponent },
+  { path: 'view-contact/:id', component: ViewContactComponent } 
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 17aaa0c6..f923b4a8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,5 @@
 <app-menu></app-menu>
 <div class="page">
+  
   <router-outlet></router-outlet>
 </div>
diff --git a/src/app/contacts/contacts.component.css b/src/app/contacts/contacts.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/contacts/contacts.component.html b/src/app/contacts/contacts.component.html
new file mode 100644
index 00000000..808229a5
--- /dev/null
+++ b/src/app/contacts/contacts.component.html
@@ -0,0 +1,9 @@
+<h2>Contacts List</h2>
+<ul>
+  <li *ngFor="let contact of contacts">
+    <strong>{{ contact.name }}</strong><br>
+    Email: {{ contact.email }}<br>
+    Phone: {{ contact.phone }}<br>
+    <button [routerLink]="['/view-contact', contact.id]">View</button>
+  </li>
+</ul>
diff --git a/src/app/contacts/contacts.component.ts b/src/app/contacts/contacts.component.ts
new file mode 100644
index 00000000..0c3408c8
--- /dev/null
+++ b/src/app/contacts/contacts.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Contact } from './contacts.model';
+import { ContactService } from './contacts.service';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-contacts',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule],
+  templateUrl: './contacts.component.html',
+  styleUrl: './contacts.component.css'
+})
+export class ContactsComponent implements OnInit {
+  contacts: Contact[] = [];
+
+  constructor(private contactService: ContactService) {}
+
+  ngOnInit(): void {
+    this.contacts = this.contactService.getContacts();
+  }
+}
diff --git a/src/app/contacts/contacts.model.ts b/src/app/contacts/contacts.model.ts
new file mode 100644
index 00000000..c4ab310a
--- /dev/null
+++ b/src/app/contacts/contacts.model.ts
@@ -0,0 +1,8 @@
+//CONTACT MODEL
+
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+}
\ No newline at end of file
diff --git a/src/app/contacts/contacts.service.ts b/src/app/contacts/contacts.service.ts
new file mode 100644
index 00000000..947d8299
--- /dev/null
+++ b/src/app/contacts/contacts.service.ts
@@ -0,0 +1,28 @@
+//CONTACT SERVICE
+
+import { Injectable } from '@angular/core';
+import { Contact } from './contacts.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactService {
+  private contacts: Contact[] = [
+    { id: 1, name: 'Alice Smith', email: 'alice@example.com', phone: '123-456-7890' },
+    { id: 2, name: 'Bob Johnson', email: 'bob@example.com', phone: '234-567-8901' },
+    { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', phone: '345-678-9012' }
+  ];
+
+  getContacts(): Contact[] {
+    return this.contacts;
+  }
+
+addContact(contact: Contact) {
+  contact.id = this.contacts.length + 1;
+  this.contacts.push(contact);
+}
+
+deleteContact(id: number) {
+  this.contacts = this.contacts.filter(c => c.id !== id);
+}
+}
\ No newline at end of file
diff --git a/src/app/layout/menu/menu.component.html b/src/app/layout/menu/menu.component.html
index 7c5ec7a2..c8d1f4ee 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>Add new contact</a></li>
+  <button routerLink="/contacts">Go to Contacts</button>
+  <button routerLink="/add-contact">Add New Contact</button>
 </ul>

From c67c50a65f1d9df464a6bd0d98d709a26fb1f82c Mon Sep 17 00:00:00 2001
From: Chrissivert <122440126+Chrissivert@users.noreply.github.com>
Date: Mon, 8 Sep 2025 12:00:10 +0200
Subject: [PATCH 2/4] removed unused files

---
 .../address-book/add-contact/add-contact.component.css |  0
 .../address-book/add-contact/add-contact.component.ts  |  1 -
 .../view-contact/view-contact.component.css            |  0
 .../view-contact/view-contact.component.ts             |  1 -
 src/app/app.component.css                              |  9 ---------
 src/app/app.component.ts                               |  3 +--
 src/app/app.module.ts                                  |  1 -
 src/app/contacts/contacts.component.css                |  0
 src/app/contacts/contacts.component.ts                 |  1 -
 src/app/layout/menu/menu.component.css                 | 10 ----------
 src/app/layout/menu/menu.component.ts                  |  1 -
 11 files changed, 1 insertion(+), 26 deletions(-)
 delete mode 100644 src/app/address-book/add-contact/add-contact.component.css
 delete mode 100644 src/app/address-book/view-contact/view-contact.component.css
 delete mode 100644 src/app/app.component.css
 delete mode 100644 src/app/contacts/contacts.component.css
 delete mode 100644 src/app/layout/menu/menu.component.css

diff --git a/src/app/address-book/add-contact/add-contact.component.css b/src/app/address-book/add-contact/add-contact.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/address-book/add-contact/add-contact.component.ts b/src/app/address-book/add-contact/add-contact.component.ts
index e69da488..62d4bf30 100644
--- a/src/app/address-book/add-contact/add-contact.component.ts
+++ b/src/app/address-book/add-contact/add-contact.component.ts
@@ -9,7 +9,6 @@ import { ContactService } from 'src/app/contacts/contacts.service';
   standalone: true,
   imports: [CommonModule, FormsModule],
   templateUrl: './add-contact.component.html',
-  styleUrls: ['./add-contact.component.css']
 })
 export class AddContactComponent {
   newContact: Contact = { id: 0, name: '', email: '', phone: '' };
diff --git a/src/app/address-book/view-contact/view-contact.component.css b/src/app/address-book/view-contact/view-contact.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/address-book/view-contact/view-contact.component.ts b/src/app/address-book/view-contact/view-contact.component.ts
index 07d97852..b2262859 100644
--- a/src/app/address-book/view-contact/view-contact.component.ts
+++ b/src/app/address-book/view-contact/view-contact.component.ts
@@ -10,7 +10,6 @@ import { Contact } from 'src/app/contacts/contacts.model';
   standalone: true,
   imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './view-contact.component.html',
-  styleUrls: ['./view-contact.component.css']
 })
 export class ViewContactComponent implements OnInit {
   contact: Contact | undefined;
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index 31d9e249..00000000
--- a/src/app/app.component.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:host {
-  display: flex;
-}
-
-.page {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b82791ab..98ab6faf 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   title = 'angular-address-book';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8207184c..bfbe3707 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
diff --git a/src/app/contacts/contacts.component.css b/src/app/contacts/contacts.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/contacts/contacts.component.ts b/src/app/contacts/contacts.component.ts
index 0c3408c8..1e79430d 100644
--- a/src/app/contacts/contacts.component.ts
+++ b/src/app/contacts/contacts.component.ts
@@ -10,7 +10,6 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './contacts.component.html',
-  styleUrl: './contacts.component.css'
 })
 export class ContactsComponent implements OnInit {
   contacts: Contact[] = [];
diff --git a/src/app/layout/menu/menu.component.css b/src/app/layout/menu/menu.component.css
deleted file mode 100644
index 75955b3c..00000000
--- a/src/app/layout/menu/menu.component.css
+++ /dev/null
@@ -1,10 +0,0 @@
-:host {
-  padding: 0 0.5em;
-}
-
-ul {
-  padding: 0;
-}
-li {
-  list-style: none;
-}
diff --git a/src/app/layout/menu/menu.component.ts b/src/app/layout/menu/menu.component.ts
index 1c826c99..9de678b4 100644
--- a/src/app/layout/menu/menu.component.ts
+++ b/src/app/layout/menu/menu.component.ts
@@ -3,6 +3,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.css'],
 })
 export class MenuComponent {}

From be05c658b3372045feab7d7fe300c6dc3643ce9f Mon Sep 17 00:00:00 2001
From: Chrissivert <122440126+Chrissivert@users.noreply.github.com>
Date: Mon, 8 Sep 2025 12:45:35 +0200
Subject: [PATCH 3/4] deleted more stuff

---
 angular.json                         |   6 ------
 {images => gifs}/address-book.gif    | Bin
 src/app/contacts/contacts.service.ts |   1 -
 src/styles.css                       |   1 -
 templates/contact-form.css           |  25 -------------------------
 templates/contact-form.html          |  19 -------------------
 templates/contact-list.css           |  11 -----------
 templates/contact-list.html          |  10 ----------
 templates/contact-view.html          |  11 -----------
 9 files changed, 84 deletions(-)
 rename {images => gifs}/address-book.gif (100%)
 delete mode 100644 src/styles.css
 delete mode 100644 templates/contact-form.css
 delete mode 100644 templates/contact-form.html
 delete mode 100644 templates/contact-list.css
 delete mode 100644 templates/contact-list.html
 delete mode 100644 templates/contact-view.html

diff --git a/angular.json b/angular.json
index be4c78d3..3d980447 100644
--- a/angular.json
+++ b/angular.json
@@ -25,9 +25,6 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
             "scripts": [],
             "browser": "src/main.ts"
           },
@@ -86,9 +83,6 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
             "scripts": []
           }
         }
diff --git a/images/address-book.gif b/gifs/address-book.gif
similarity index 100%
rename from images/address-book.gif
rename to gifs/address-book.gif
diff --git a/src/app/contacts/contacts.service.ts b/src/app/contacts/contacts.service.ts
index 947d8299..a1df8f67 100644
--- a/src/app/contacts/contacts.service.ts
+++ b/src/app/contacts/contacts.service.ts
@@ -1,5 +1,4 @@
 //CONTACT SERVICE
-
 import { Injectable } from '@angular/core';
 import { Contact } from './contacts.model';
 
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index 90d4ee00..00000000
--- a/src/styles.css
+++ /dev/null
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
diff --git a/templates/contact-form.css b/templates/contact-form.css
deleted file mode 100644
index 04068da6..00000000
--- a/templates/contact-form.css
+++ /dev/null
@@ -1,25 +0,0 @@
-: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/templates/contact-form.html b/templates/contact-form.html
deleted file mode 100644
index 868d2062..00000000
--- a/templates/contact-form.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<h1>Create Contact</h1>
-<form>
-  <label for="first-name">First name:</label>
-  <input id="first-name" type="text" />
-
-  <label for="last-name">Last name:</label>
-  <input id="last-name" type="text" />
-
-  <label for="street">Street:</label>
-  <input id="street" type="text" />
-
-  <label for="city">City:</label>
-  <input id="city" type="text" />
-
-  <div class="actions">
-    <div class="spacer"></div>
-    <button type="submit">Create</button>
-  </div>
-</form>
diff --git a/templates/contact-list.css b/templates/contact-list.css
deleted file mode 100644
index a7943571..00000000
--- a/templates/contact-list.css
+++ /dev/null
@@ -1,11 +0,0 @@
-:host {
-  padding: 0.5em;
-  width: 400px;
-}
-
-.contact {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid #ddd;
-  padding: 0.5em 0;
-}
diff --git a/templates/contact-list.html b/templates/contact-list.html
deleted file mode 100644
index 3f4b67b7..00000000
--- a/templates/contact-list.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h1>Contacts</h1>
-<!-- if we have contacts -->
-<div class="contact-container">
-  <div class="contact">
-    <span>Joe Blogs</span>
-    <a>View</a>
-  </div>
-</div>
-<!-- if we don't have contacts -->
-<div>No contacts yet</div>
diff --git a/templates/contact-view.html b/templates/contact-view.html
deleted file mode 100644
index aeeab471..00000000
--- a/templates/contact-view.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- ng-container is a nice way to have if/else displays,
-     without having the "container" being rendered to the dom -->
-<!-- if we have a contact -->
-<ng-container>
-  <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
-  <p>{{ contact.street }}, {{ contact.city }}</p>
-</ng-container>
-<!-- if we don't have a contact -->
-<ng-container>
-  <h1>Contact not found</h1>
-</ng-container>

From 95c3d6b0ab2cd49d88afe61378d0826c666f3680 Mon Sep 17 00:00:00 2001
From: Chrissivert <122440126+Chrissivert@users.noreply.github.com>
Date: Mon, 8 Sep 2025 12:46:45 +0200
Subject: [PATCH 4/4] finished deleting

---
 src/assets/.gitkeep | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/assets/.gitkeep

diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
deleted file mode 100644
index e69de29b..00000000