Magnus Brandsegg

angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "1d8dea71-36d1-4cfb-b774-0333678fed29"
   }
 }

src/app/add-contact/add-contact.component.html

@@ -0,0 +1,15 @@
+<form (ngSubmit)="addContact()">
+    <label for="firstName">First Name:</label>
+    <input id="firstName" [(ngModel)]="firstName" name="firstName" required><br>
+
+    <label for="lastName">Last Name:</label>
+    <input id="lastName" [(ngModel)]="lastName" name="lastName" required><br>
+
+    <label for="street">Street:</label>
+    <input id="street" [(ngModel)]="street" name="street" required><br>
+
+    <label for="city">City:</label>
+    <input id="city" [(ngModel)]="city" name="city" required><br>
+
+    <button type="submit">Add Contact</button>
+  </form>

src/app/add-contact/add-contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddContactComponent } from './add-contact.component';
+
+describe('AddContactComponent', () => {
+  let component: AddContactComponent;
+  let fixture: ComponentFixture<AddContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddContactComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+// add-contact.component.ts
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-add-contact',
+  templateUrl: './add-contact.component.html',
+  styleUrls: ['./add-contact.component.css']
+})
+export class AddContactComponent {
+  firstName = '';
+  lastName = '';
+  street = '';
+  city = '';
+
+  constructor(private router: Router, private contactService: ContactService) {}
+
+  addContact() {
+    const newContact = {
+      id: Date.now(),
+      firstName: this.firstName,
+      lastName: this.lastName,
+      street: this.street,
+      city: this.city
+    };
+    this.contactService.addContact(newContact);
+    this.router.navigate(['/contact-list']);
+  }
+}

src/app/app-routing.module.ts

@@ -1,10 +1,20 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { ContactListComponent } from './contact-list/contact-list.component';
+import { AddContactComponent } from './add-contact/add-contact.component';
+import { ContactProfileComponent } from './contact-profile/contact-profile.component';
+import { EditContactComponent } from './edit-contact/edit-contact.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: '/contact-list', pathMatch: 'full' },
+  { path: 'contact-list', component: ContactListComponent },
+  { path: 'add-contact', component: AddContactComponent },
+  { path: 'contact-profile/:id', component: ContactProfileComponent },
+  { path: 'edit-contact/:id', component: EditContactComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,4 +1,8 @@
-<app-menu></app-menu>
-<div class="page">
-  <router-outlet></router-outlet>
+<div class="menu">
+  <h1>Menu</h1>
+  <a routerLink="/contact-list">Contact List</a><br>
+  <a routerLink="/add-contact">Add New Contact</a>
 </div>
+<div class="content">
+  <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -4,10 +4,16 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutModule } from './layout/layout.module';
+import { CommonModule } from '@angular/common';
+import { ContactListComponent } from './contact-list/contact-list.component';
+import { AddContactComponent } from './add-contact/add-contact.component';
+import { FormsModule } from '@angular/forms';
+import { ContactProfileComponent } from './contact-profile/contact-profile.component';
+import { EditContactComponent } from './edit-contact/edit-contact.component';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  declarations: [AppComponent, ContactListComponent, AddContactComponent, ContactProfileComponent, EditContactComponent],
+  imports: [BrowserModule, AppRoutingModule, LayoutModule, CommonModule, FormsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contact-list/contact-list.component.html

@@ -0,0 +1,8 @@
+
+<ul>
+    <li *ngFor="let contact of contacts">
+      {{ contact.firstName }} {{ contact.lastName }}
+      <button (click)="viewContact(contact.id)">View</button>
+      <button (click)="editContact(contact.id)">Edit</button>
+    </li>
+  </ul>

src/app/contact-list/contact-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactListComponent } from './contact-list.component';
+
+describe('ContactListComponent', () => {
+  let component: ContactListComponent;
+  let fixture: ComponentFixture<ContactListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact-list/contact-list.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-contact-list',
+  templateUrl: './contact-list.component.html',
+  styleUrls: ['./contact-list.component.css']
+})
+export class ContactListComponent implements OnInit {
+  contacts = this.contactService.getContacts();
+
+  constructor(private router: Router, private contactService: ContactService) {}
+
+  ngOnInit() {}
+
+  viewContact(id: number) {
+    this.router.navigate(['/contact-profile', id]);
+  }
+
+  editContact(id: number) {
+    this.router.navigate(['/edit-contact', id]);
+  }
+}

src/app/contact-profile/contact-profile.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="contact">
+    <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
+    <p>{{ contact.street }}</p>
+    <p>{{ contact.city }}</p>
+  </div>

src/app/contact-profile/contact-profile.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactProfileComponent } from './contact-profile.component';
+
+describe('ContactProfileComponent', () => {
+  let component: ContactProfileComponent;
+  let fixture: ComponentFixture<ContactProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactProfileComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact-profile/contact-profile.component.ts

@@ -0,0 +1,20 @@
+// contact-profile.component.ts
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-contact-profile',
+  templateUrl: './contact-profile.component.html',
+  styleUrls: ['./contact-profile.component.css']
+})
+export class ContactProfileComponent implements OnInit {
+  contact: any;
+
+  constructor(private route: ActivatedRoute, private contactService: ContactService) {}
+
+  ngOnInit() {
+    const id = +this.route.snapshot.paramMap.get('id')!;
+    this.contact = this.contactService.getContactById(id);
+  }
+}

src/app/contact.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ContactService } from './contact.service';
+
+describe('ContactService', () => {
+  let service: ContactService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ContactService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/contact.service.ts

@@ -0,0 +1,34 @@
+// contact.service.ts
+import { Injectable } from '@angular/core';
+
+interface Contact {
+  id: number;
+  firstName: string;
+  lastName: string;
+  street: string;
+  city: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactService {
+  private contacts: Contact[] = [
+    { id: 1, firstName: 'John', lastName: 'Doe', street: '123 Main St', city: 'Anytown' },
+    { id: 2, firstName: 'Jane', lastName: 'Doe', street: '123 Main St', city: 'Anytown' },
+    { id: 3, firstName: 'Jonas', lastName: 'Doe', street: '123 Main St', city: 'Anytown' },
+    { id: 4, firstName: 'Jenny', lastName: 'Doe', street: '123 Main St', city: 'Anytown' }
+  ];
+
+  getContacts() {
+    return this.contacts;
+  }
+
+  addContact(contact: Contact) {
+    this.contacts.push(contact);
+  }
+
+  getContactById(id: number) {
+    return this.contacts.find(contact => contact.id === id);
+  }
+}

src/app/edit-contact/edit-contact.component.html

@@ -0,0 +1,20 @@
+<div *ngIf="errorMessage">
+    <p>{{ errorMessage }}</p>
+  </div>
+  <div *ngIf="contact">
+    <form (ngSubmit)="saveContact()">
+      <label for="firstName">First Name:</label>
+      <input id="firstName" [(ngModel)]="contact.firstName" name="firstName" required>
+
+      <label for="lastName">Last Name:</label>
+      <input id="lastName" [(ngModel)]="contact.lastName" name="lastName" required>
+
+      <label for="street">Street:</label>
+      <input id="street" [(ngModel)]="contact.street" name="street" required>
+
+      <label for="city">City:</label>
+      <input id="city" [(ngModel)]="contact.city" name="city" required>
+
+      <button type="submit">Save Contact</button>
+    </form>
+  </div>

src/app/edit-contact/edit-contact.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditContactComponent } from './edit-contact.component';
+
+describe('EditContactComponent', () => {
+  let component: EditContactComponent;
+  let fixture: ComponentFixture<EditContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditContactComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/edit-contact/edit-contact.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-edit-contact',
+  templateUrl: './edit-contact.component.html',
+  styleUrls: ['./edit-contact.component.css']
+})
+export class EditContactComponent implements OnInit {
+  contact: any;
+  errorMessage: string | null = null;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private contactService: ContactService
+  ) {}
+
+  ngOnInit() {
+    const id = +this.route.snapshot.paramMap.get('id')!;
+    this.contact = this.contactService.getContactById(id);
+    if (!this.contact) {
+      this.errorMessage = 'Contact not found!';
+    }
+  }
+
+  saveContact() {
+    if (this.contact) {
+      // Save the updated contact details
+      this.router.navigate(['/contact-list']);
+    }
+  }
+}