diff --git a/first-app/src/app/details/details.ts b/first-app/src/app/details/details.ts index 45ce509..fb08f3c 100644 --- a/first-app/src/app/details/details.ts +++ b/first-app/src/app/details/details.ts @@ -2,38 +2,64 @@ import {Component, inject} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {HousingService} from '../housing'; import {HousingLocationInfo} from '../housinglocation'; +import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms'; @Component({ selector: 'app-details', + imports: [ReactiveFormsModule], template: ` -
- Exterior photo of {{ housingLocation?.name }} -
-

{{ housingLocation?.name }}

-

{{ housingLocation?.city }}, {{ housingLocation?.state }}

-
-
-

About this housing location

- -
-
- `, +
+ Exterior photo of {{ housingLocation?.name }} +
+

{{ housingLocation?.name }}

+

{{ housingLocation?.city }}, {{ housingLocation?.state }}

+
+
+

About this housing location

+ +
+
+

Apply now to live here

+
+ + + + + + + +
+
+
+ `, styleUrls: ['./details.css'], }) export class Details { route: ActivatedRoute = inject(ActivatedRoute); housingService = inject(HousingService); housingLocation: HousingLocationInfo | undefined; + applyForm = new FormGroup({ + firstName: new FormControl(''), + lastName: new FormControl(''), + email: new FormControl(''), + }); constructor() { - const housingLocationId = Number(this.route.snapshot.params['id']); + const housingLocationId = parseInt(this.route.snapshot.params['id'], 10); this.housingLocation = this.housingService.getHousingLocationById(housingLocationId); } + submitApplication() { + this.housingService.submitApplication( + this.applyForm.value.firstName ?? '', + this.applyForm.value.lastName ?? '', + this.applyForm.value.email ?? '', + ); + } } \ No newline at end of file diff --git a/first-app/src/app/housing.ts b/first-app/src/app/housing.ts index 1b14f29..cc5f05c 100644 --- a/first-app/src/app/housing.ts +++ b/first-app/src/app/housing.ts @@ -113,4 +113,9 @@ export class HousingService { getHousingLocationById(id: number): HousingLocationInfo | undefined { return this.housingLocationList.find((housingLocation) => housingLocation.id === id); } + submitApplication(firstName: string, lastName: string, email: string) { + console.log( + `Homes application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`, + ); + } } \ No newline at end of file