Mona Eikli

angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "594a010b-3dfd-4a42-8417-ac6fe54a56d8"
   }
 }

src/app/app-routing.module.ts

@@ -1,7 +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';
+import { EditComponent } from './contacts/edit/edit.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'contacts', component: ListComponent },
+  { path: 'contacts/:id', component: ViewComponent },
+  { path: 'contacts/add', component: AddComponent },
+  { path: 'test', component: AddComponent },
+  { path: 'contacts/edit/:id', component: EditComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.css

@@ -1,9 +1,18 @@
-:host {
-  display: flex;
+
+body, :host {
+  background: #f4f6fb;
+  min-height: 100vh;
+  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 .page {
-  flex: 1;
-  display: flex;
-  justify-content: center;
+  max-width: 700px;
+  margin: 2em auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+  padding: 2em 2em 2em 2em;
+  min-height: 60vh;
 }

src/app/app.module.ts

@@ -4,10 +4,19 @@ 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 { ContactsModule } from './contacts/contacts.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LayoutModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LayoutModule,
+    CommonModule,
+    ContactsModule
+  ],
+  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contacts/add/add.component.css

@@ -0,0 +1,47 @@
+
+
+form div {
+	margin-bottom: 1.2em;
+}
+
+label {
+	display: block;
+	margin-bottom: 0.4em;
+	font-weight: 400;
+	color: #333;
+}
+
+input[type="text"] {
+	width: 100%;
+	padding: 0.6em;
+	border-radius: 4px;
+	font-size: 1em;
+	transition: border-color 0.2s;
+    border: 1.5px solid #ccc;
+}
+
+input[type="text"]:focus {
+	border-color: #007bff;
+	outline: none;
+}
+
+button[type="submit"] {
+	background: #007bff;
+	border: none;
+	padding: 0.7em 1.5em;
+	border-radius: 4px;
+	font-size: 1em;
+	cursor: pointer;
+	transition: background 0.2s;
+    color: #fff;
+}
+
+button[type="submit"]:hover {
+	background: #0056b3;
+}
+
+h2 {
+	text-align: center;
+	color: #007bff;
+	margin-bottom: 1.5em;
+}

src/app/contacts/add/add.component.html

@@ -0,0 +1,24 @@
+<div>
+  <form [formGroup]="contactForm" (ngSubmit)="addContact()">
+    <div>
+      <label for="firstname">Firstname:</label>
+      <input type="text" id="firstname" formControlName="firstname" placeholder="Enter firstname"/>
+    </div>
+
+    <div>
+      <label for="lastname">Lastname:</label>
+      <input type="text" id="lastname" formControlName="lastname" placeholder="Enter lastname"/>
+    </div>
+
+    <div>
+      <label for="street">Street:</label>
+      <input type="text" id="street" formControlName="street" placeholder="Enter street"/>
+    </div>
+    <div>
+      <label for="city">City:</label>
+      <input type="text" id="city" formControlName="city" placeholder="Enter city"/>
+    </div>
+
+    <button type="submit" [disabled]="contactForm.invalid">Add Contact</button>
+  </form>
+</div> 

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();
+  });
+});

src/app/contacts/add/add.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ContactsService } from '../contacts.service';
+import { Contact } from '../models/contacts';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.css']
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  cservice: ContactsService
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private readonly contactService: ContactsService
+  ) {
+      this.contactForm = this.formBuilder.group({
+        firstname: ['', Validators.required],   
+        lastname: ['', Validators.required],
+        street: ['', Validators.required],
+        city: ['', Validators.required]
+      });
+    this.cservice = this.contactService;
+  }
+
+  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.cservice.AddContact(newContact);
+    this.contactForm.reset();
+  }
+}

src/app/contacts/contacts.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddComponent } from './add/add.component';
+import { ViewComponent } from './view/view.component';
+import { ListComponent } from './list/list.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { EditComponent } from './edit/edit.component';
+
+
+
+@NgModule({
+  declarations: [AddComponent, ViewComponent, ListComponent, EditComponent],
+  imports: [CommonModule, ReactiveFormsModule, RouterModule],
+  exports: [AddComponent, ViewComponent, ListComponent, EditComponent],
+})
+export class ContactsModule { }

src/app/contacts/contacts.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Contact } from './models/contacts';
+import { CONTACTS } from '../data/contacts';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  public contacts: Contact[] = CONTACTS;
+
+  public AddContact(c: Contact) {
+  c.id = this.contacts.length + 1;
+  this.contacts.push(c);
+  }
+
+  public GetContactById(id: number | null) {
+    const contact = this.contacts.find((contact) => contact.id === id);
+    if (!contact) {
+      return null;
+    }
+    return contact;
+  }
+
+  public UpdateContact(updated: Contact) {
+    const idx = this.contacts.findIndex(c => c.id === updated.id);
+    if (idx !== -1) {
+      this.contacts[idx] = updated;
+    }
+  }
+}

src/app/contacts/edit/edit.component.css

@@ -0,0 +1,45 @@
+form div {
+	margin-bottom: 1.2em;
+}
+
+label {
+	display: block;
+	margin-bottom: 0.4em;
+	font-weight: 400;
+	color: #333;
+}
+
+input[type="text"] {
+	width: 100%;
+	padding: 0.6em;
+	border-radius: 4px;
+	font-size: 1em;
+	transition: border-color 0.2s;
+    border: 1.5px solid #ccc;
+}
+
+input[type="text"]:focus {
+	border-color: #007bff;
+	outline: none;
+}
+
+button[type="submit"] {
+	background: #007bff;
+	border: none;
+	padding: 0.7em 1.5em;
+	border-radius: 4px;
+	font-size: 1em;
+	cursor: pointer;
+	transition: background 0.2s;
+    color: #fff;
+}
+
+button[type="submit"]:hover {
+	background: #0056b3;
+}
+
+h2 {
+	text-align: center;
+	color: #007bff;
+	margin-bottom: 1.5em;
+}

src/app/contacts/edit/edit.component.html

@@ -0,0 +1,24 @@
+<div *ngIf="contact; else notFound">
+  <form [formGroup]="contactForm" (ngSubmit)="saveContact()">
+    <div>
+      <label for="firstname">Firstname:</label>
+      <input type="text" id="firstname" formControlName="firstname" />
+    </div>
+    <div>
+      <label for="lastname">Lastname:</label>
+      <input type="text" id="lastname" formControlName="lastname" />
+    </div>
+    <div>
+      <label for="street">Street:</label>
+      <input type="text" id="street" formControlName="street" />
+    </div>
+    <div>
+      <label for="city">City:</label>
+      <input type="text" id="city" formControlName="city" />
+    </div>
+    <button type="submit" [disabled]="contactForm.invalid">Save</button>
+  </form>
+</div>
+<ng-template #notFound>
+  <h2>Contact not found!</h2>
+</ng-template>

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({
+      declarations: [EditComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});