done with base and all extensions

angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: '', redirectTo: '/contacts', pathMatch: 'full' },
+  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule)
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

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

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

@@ -0,0 +1,19 @@
+<h1>Create Contact</h1>
+<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+  <label for="first-name">First name:</label>
+  <input id="first-name" type="text" formControlName="firstName" />
+
+  <label for="last-name">Last name:</label>
+  <input id="last-name" type="text" formControlName="lastName" />
+
+  <label for="street">Street:</label>
+  <input id="street" type="text" formControlName="street" />
+
+  <label for="city">City:</label>
+  <input id="city" type="text" formControlName="city" />
+
+  <div class="actions">
+    <div class="spacer"></div>
+    <button type="submit" [disabled]="!contactForm.valid">Create</button>
+  </div>
+</form>

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

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ContactsService } from '../contacts.service';
+
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.css']
+})
+export class AddComponent implements OnInit {
+  contactForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private contactsService: ContactsService,
+    private router: Router
+  ) {
+    this.contactForm = this.fb.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required]
+    });
+  }
+
+  ngOnInit(): void {}
+
+  onSubmit(): void {
+    if (this.contactForm.valid) {
+      this.contactsService.addContact(this.contactForm.value);
+      this.router.navigate(['/contacts']);
+    }
+  }
+}

src/app/contacts/contacts-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ListComponent } from './list/list.component';
+import { AddComponent } from './add/add.component';
+import { ViewComponent } from './view/view.component';
+import { EditComponent } from './edit/edit.component';
+
+const routes: Routes = [
+  { path: '', component: ListComponent },
+  { path: 'add', component: AddComponent },
+  { path: ':id', component: ViewComponent },
+  { path: ':id/edit', component: EditComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContactsRoutingModule { }

src/app/contacts/contacts.module.ts

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

src/app/contacts/contacts.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { Contact } from './models/contact';
+import { contacts } from './data/contacts';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+  private contacts: Contact[] = [...contacts];
+  private nextId = 2;
+
+  getContacts(): Contact[] {
+    return this.contacts;
+  }
+
+  getContactById(id: number): Contact | undefined {
+    return this.contacts.find(contact => contact.id === id);
+  }
+
+  addContact(contact: Omit<Contact, 'id'>): Contact {
+    const newContact: Contact = {
+      ...contact,
+      id: this.nextId++
+    };
+    this.contacts.push(newContact);
+    return newContact;
+  }
+
+  updateContact(id: number, contact: Omit<Contact, 'id'>): Contact | null {
+    const index = this.contacts.findIndex(c => c.id === id);
+    if (index !== -1) {
+      this.contacts[index] = { ...contact, id };
+      return this.contacts[index];
+    }
+    return null;
+  }
+
+  deleteContact(id: number): boolean {
+    const index = this.contacts.findIndex(c => c.id === id);
+    if (index !== -1) {
+      this.contacts.splice(index, 1);
+      return true;
+    }
+    return false;
+  }
+}

src/app/contacts/data/contacts.ts

@@ -0,0 +1,11 @@
+import { Contact } from '../models/contact';
+
+export const contacts: Contact[] = [
+  {
+    id: 1,
+    firstName: 'Joe',
+    lastName: 'Blogs',
+    street: '123 Main St',
+    city: 'London'
+  }
+];

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

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

@@ -0,0 +1,25 @@
+<div *ngIf="contact; else notFound">
+  <h1>Edit Contact</h1>
+  <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+    <label for="first-name">First name:</label>
+    <input id="first-name" type="text" formControlName="firstName" />
+
+    <label for="last-name">Last name:</label>
+    <input id="last-name" type="text" formControlName="lastName" />
+
+    <label for="street">Street:</label>
+    <input id="street" type="text" formControlName="street" />
+
+    <label for="city">City:</label>
+    <input id="city" type="text" formControlName="city" />
+
+    <div class="actions">
+      <div class="spacer"></div>
+      <button type="submit" [disabled]="!contactForm.valid">Update</button>
+    </div>
+  </form>
+</div>
+<ng-template #notFound>
+  <h1>Contact not found</h1>
+  <p>The contact you are trying to edit does not exist.</p>
+</ng-template>

src/app/contacts/edit/edit.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Contact } from '../models/contact';
+import { ContactsService } from '../contacts.service';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent implements OnInit {
+  contactForm: FormGroup;
+  contact: Contact | undefined;
+  contactId: number;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private contactsService: ContactsService
+  ) {
+    this.contactForm = this.fb.group({
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
+      street: ['', Validators.required],
+      city: ['', Validators.required]
+    });
+    this.contactId = 0;
+  }
+
+  ngOnInit(): void {
+    this.contactId = Number(this.route.snapshot.paramMap.get('id'));
+    this.contact = this.contactsService.getContactById(this.contactId);
+
+    if (this.contact) {
+      this.contactForm.patchValue({
+        firstName: this.contact.firstName,
+        lastName: this.contact.lastName,
+        street: this.contact.street,
+        city: this.contact.city
+      });
+    }
+  }
+
+  onSubmit(): void {
+    if (this.contactForm.valid && this.contact) {
+      this.contactsService.updateContact(this.contactId, this.contactForm.value);
+      this.router.navigate(['/contacts', this.contactId]);
+    }
+  }
+}

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

src/app/contacts/list/list.component.html

@@ -0,0 +1,10 @@
+<h1>Contacts</h1>
+<div *ngIf="contacts.length > 0; else noContacts" class="contact-container">
+  <div class="contact" *ngFor="let contact of contacts">
+    <span>{{ contact.firstName }} {{ contact.lastName }}</span>
+    <a [routerLink]="['/contacts', contact.id]">View</a>
+  </div>
+</div>
+<ng-template #noContacts>
+  <div>No contacts yet</div>
+</ng-template>

src/app/contacts/list/list.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Contact } from '../models/contact';
+import { ContactsService } from '../contacts.service';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent implements OnInit {
+  contacts: Contact[] = [];
+
+  constructor(private contactsService: ContactsService) { }
+
+  ngOnInit(): void {
+    this.contacts = this.contactsService.getContacts();
+  }
+}

src/app/contacts/models/contact.ts

@@ -0,0 +1,7 @@
+export interface Contact {
+  id: number;
+  firstName: string;
+  lastName: string;
+  street: string;
+  city: string;
+}

src/app/contacts/view/view.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="contact; else notFound">
+  <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
+  <p>{{ contact.street }}, {{ contact.city }}</p>
+  <a [routerLink]="['/contacts', contact.id, 'edit']">Edit</a>
+</ng-container>
+<ng-template #notFound>
+  <h1>Contact not found</h1>
+</ng-template>