Emanuels Egils Zaurins

src/app/app-routing.module.ts

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

src/app/app.component.html

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

src/app/app.module.ts

@@ -4,10 +4,12 @@ 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, LayoutModule, ContactsModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contacts.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ContactsService {
+
+  constructor() { }
+}

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,16 @@
+<h1>Create Contact</h1>
+<form [formGroup]="contactForm" (ngSubmit)="addContact()">
+  <label for="name">Name</label>
+  <input id="name" type="text" formControlName="name"  />
+
+  <label for="email">Email:</label>
+  <input id="email" type="text" formControlName="email" />
+
+  <label for="description">Description:</label>
+  <input id="description" type="text" formControlName="description"  />
+
+  <div class="actions">
+    <div class="spacer"></div>
+    <button type="submit">Create</button>
+  </div>
+</form>

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

@@ -0,0 +1,31 @@
+import { Component, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { contactService } from 'src/app/services/contact-service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-add',
+  standalone: false,
+  templateUrl: './add.component.html',
+  styleUrl: './add.component.css'
+})
+export class AddComponent {
+  contactForm: FormGroup;
+  formBuilder = inject(FormBuilder);
+  contactService = inject(contactService)
+  router = inject(Router)
+
+
+  constructor(){
+    this.contactForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      email: ['', Validators.required],
+      description: ['', Validators.required],
+    });
+  }
+
+  addContact() {
+    this.contactService.addContact(this.contactForm.value)
+    this.router.navigate(['contacts'])
+  }
+}

src/app/contacts/contacts.module.ts

@@ -0,0 +1,32 @@
+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 { EditComponent } from './edit/edit.component';
+import { RouterModule } from '@angular/router';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    EditComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    ReactiveFormsModule
+  ],
+  exports:[
+    AddComponent,
+    ViewComponent,
+    ListComponent,
+    EditComponent
+  ]
+
+})
+export class ContactsModule { }

src/app/contacts/data/contacts.ts

@@ -0,0 +1,22 @@
+import { Contact } from "../models/contact";
+
+export const CONSTACTS: Contact[] = [
+  {
+    id: 1,
+    name: 'Porsche',
+    email: '911',
+    description: 'Mid-life crisis in car form',
+  },
+  {
+    id: 2,
+    name: 'Volks Wagen',
+    email: 'Beetle',
+    description: 'Herbie',
+  },
+  {
+    id: 3,
+    name: 'Mini',
+    email: 'Cooper',
+    description: 'Tiny car',
+  },
+];

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

@@ -0,0 +1 @@
+<p>edit works!</p>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrl: './edit.component.css'
+})
+export class EditComponent {
+
+}

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,18 @@
+<h1>Contacts</h1>
+<!-- if we have contacts -->
+ @if (this.contacts.length >0){
+@for (item of contacts; track $index) {
+<div class="contact-container">
+  <div class="contact">
+    <span>{{item.name}}</span>
+    <a routerLink="/contacts/{{item.id}}">View</a>
+  </div>
+  </div>
+}
+
+}
+@else {
+
+<!-- if we don't have contacts -->
+<div>No contacts yet</div>
+}

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

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { contactService } from 'src/app/services/contact-service';
+import { Contact } from '../models/contact';
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrl: './list.component.css'
+})
+export class ListComponent {
+  contactService = inject(contactService)
+  contacts: Contact[] = this.contactService.getAllContacts();
+
+}

src/app/contacts/models/contact.ts

@@ -0,0 +1,6 @@
+export interface Contact {
+  id: number;
+  name: string;
+  email: string;
+  description: string;
+}

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

@@ -0,0 +1,14 @@
+<!-- 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 -->
+ @if (contact) {
+<ng-container>
+  <h1>{{ contact.name}}</h1>
+  <p>{{ contact.email }}, {{ contact.description }}</p>
+</ng-container>
+ } @else {
+<!-- if we don't have a contact -->
+<ng-container>
+  <h1>Contact not found</h1>
+</ng-container>
+ }

src/app/contacts/view/view.component.ts

@@ -0,0 +1,17 @@
+import { Component, inject } from '@angular/core';
+import { Contact } from '../models/contact';
+import { contactService } from 'src/app/services/contact-service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrl: './view.component.css'
+})
+export class ViewComponent {
+    contactService = inject(contactService)
+    route = inject(ActivatedRoute)
+    id = this.route.snapshot.paramMap.get("id")
+    contact: Contact | null = this.contactService.getContactById(Number(this.id));
+
+}

src/app/layout/menu/menu.component.html

@@ -1,5 +1,6 @@
 <h2>Menu</h2>
 <ul>
-  <li><a>Contacts list</a></li>
-  <li><a>Add new contact</a></li>
+    <li><a routerLink="/">Home</a></li>
+  <li><a routerLink="/contacts">Contacts list</a></li>
+  <li><a routerLink="contacts/add">Add new contact</a></li>
 </ul>

src/app/services/contact-service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from "@angular/core";
+import { CONSTACTS } from "../contacts/data/contacts";
+import { Contact } from "../contacts/models/contact";
+
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class contactService {
+    private contacts: Contact[] = CONSTACTS
+    private currentID: number = this.contacts.length
+
+    public getContactById(id: number | null): Contact | null{
+        const contact = this.contacts.find((contact) => contact.id === id)
+        if (!contact){
+            return null
+        }
+        return contact
+    }
+    public getAllContacts(): Contact[] {
+        return this.contacts;
+    }
+    public addContact(contact: Contact) {
+        this.currentID++;
+        this.contacts.push({...contact, id: this.currentID})
+
+    }
+}