Merge pull request #3 from KaraniWachira/service

feat: added a form group to accept user details in the listing applic…

src/app/app.component.ts

@@ -9,7 +9,11 @@ import {RouterModule} from "@angular/router";
   template: `
     <main>
       <header class="brand-name">
-        <img class="brand-logo" ngSrc="/assets/img/logo.png" alt="logo" aria-hidden="true"/>
+        <img class="brand-logo"
+             src="/assets/img/logo.png"
+             alt="logo"
+             width="20px"
+             height="30px"/>
       </header>
       <section class="content">
         <router-outlet></router-outlet>

src/app/details/details.component.ts

@@ -3,11 +3,12 @@ import { CommonModule } from '@angular/common';
 import {ActivatedRoute} from "@angular/router";
 import {HousingService} from "../housing.service";
 import {HousingLocation} from "../housing-location";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-details',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ReactiveFormsModule],
   template: `
    <article>
      <img class="listing-photo" [src]="housingLocation?.photo" />
@@ -25,7 +26,18 @@ import {HousingLocation} from "../housing-location";
      </section>
      <section class="listing-apply">
        <h2 class="section-heading">Apply to reside here! </h2>
-       <button class="primary">Apply Now </button>
+       <form [formGroup]="applyForm" (submit)="submitApplication">
+         <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="email">Email</label>
+         <input id="email" type="email" formControlName="email">
+         
+         <button type="submit" class="primary">Apply Now</button>
+       </form>
      </section>
    </article>
   `,
@@ -36,9 +48,23 @@ export class DetailsComponent {
   housingService = inject(HousingService);
   housingLocation: HousingLocation | undefined;
 
+  applyForm = new FormGroup({
+    firstName: new FormControl(''),
+    lastName: new FormControl(''),
+    email: new FormControl('')
+  });
+
   constructor() {
     const housingLocationId = Number(this.route.snapshot.params['id']);
     this.housingLocation = this.housingService.getHousingLocationId(housingLocationId);
   }
 
+  submitApplication() {
+    this.housingService.submitApplication(
+        this.applyForm.value.firstName ?? '',
+        this.applyForm.value.lastName ?? '',
+        this.applyForm.value.email ?? '',
+    );
+  }
+
 }

src/app/housing.service.ts

@@ -121,4 +121,8 @@ export class HousingService {
   getHousingLocationId(id: number): HousingLocation | undefined{
     return this.housingLocationList.find(housingLocation => housingLocation.id === id);
   }
+  submitApplication(firstName: string, lastName: string, email: string) {
+    console.log(firstName, lastName, email);
+
+  }
 }