Chris Sivert

angular.json

@@ -25,9 +25,6 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
             "scripts": [],
             "browser": "src/main.ts"
           },
@@ -86,13 +83,13 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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>

src/app/address-book/add-contact/add-contact.component.ts

@@ -0,0 +1,23 @@
+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',
+})
+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!');
+  }
+}

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>

src/app/address-book/view-contact/view-contact.component.ts

@@ -0,0 +1,50 @@
+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',
+})
+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;
+      }
+    }
+  }
+}

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)],

src/app/app.component.html

@@ -1,4 +1,5 @@
 <app-menu></app-menu>
 <div class="page">
+
   <router-outlet></router-outlet>
 </div>

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';

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';

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>

src/app/contacts/contacts.component.ts

@@ -0,0 +1,22 @@
+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',
+})
+export class ContactsComponent implements OnInit {
+  contacts: Contact[] = [];
+
+  constructor(private contactService: ContactService) {}
+
+  ngOnInit(): void {
+    this.contacts = this.contactService.getContacts();
+  }
+}

src/app/contacts/contacts.model.ts

@@ -0,0 +1,8 @@
+//CONTACT MODEL
+
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+}

src/app/contacts/contacts.service.ts

@@ -0,0 +1,27 @@
+//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);
+}
+}

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>

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 {}