sanchezvem/introductionAngular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

step 12

Browse Source
This commit is contained in:
sanchezvem
2025-11-04 11:32:02 +01:00
parent 28edfef8bf
commit 40ac21b234
2 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
first-app/src/app/details/details.ts
View File

@@ -2,38 +2,64 @@ import {Component, inject} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {HousingService} from '../housing'; import {HousingService} from '../housing';
import {HousingLocationInfo} from '../housinglocation'; import {HousingLocationInfo} from '../housinglocation';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
@Component({ @Component({
selector: 'app-details', selector: 'app-details',
imports: [ReactiveFormsModule],
template: ` template: `
<article> <article>
<img <img
class="listing-photo" class="listing-photo"
[src]="housingLocation?.photo" [src]="housingLocation?.photo"
alt="Exterior photo of {{ housingLocation?.name }}" alt="Exterior photo of {{ housingLocation?.name }}"
crossorigin crossorigin
/> />
<section class="listing-description"> <section class="listing-description">
<h2 class="listing-heading">{{ housingLocation?.name }}</h2> <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
<p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p> <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
</section> </section>
<section class="listing-features"> <section class="listing-features">
<h2 class="section-heading">About this housing location</h2> <h2 class="section-heading">About this housing location</h2>
<ul> <ul>
<li>Units available: {{ housingLocation?.availableUnits }}</li> <li>Units available: {{ housingLocation?.availableUnits }}</li>
<li>Does this location have wifi: {{ housingLocation?.wifi }}</li> <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
<li>Does this location have laundry: {{ housingLocation?.laundry }}</li> <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
</ul> </ul>
</section> </section>
</article> <section class="listing-apply">
`, <h2 class="section-heading">Apply now to live here</h2>
<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>
`,
styleUrls: ['./details.css'], styleUrls: ['./details.css'],
}) })
export class Details { export class Details {
route: ActivatedRoute = inject(ActivatedRoute); route: ActivatedRoute = inject(ActivatedRoute);
housingService = inject(HousingService); housingService = inject(HousingService);
housingLocation: HousingLocationInfo | undefined; housingLocation: HousingLocationInfo | undefined;
applyForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
});
constructor() { constructor() {
const housingLocationId = Number(this.route.snapshot.params['id']); const housingLocationId = parseInt(this.route.snapshot.params['id'], 10);
this.housingLocation = this.housingService.getHousingLocationById(housingLocationId); this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
} }
submitApplication() {
this.housingService.submitApplication(
this.applyForm.value.firstName ?? '',
this.applyForm.value.lastName ?? '',
this.applyForm.value.email ?? '',
);
}
} }

5
first-app/src/app/housing.ts
View File

@@ -113,4 +113,9 @@ export class HousingService {
getHousingLocationById(id: number): HousingLocationInfo | undefined { getHousingLocationById(id: number): HousingLocationInfo | undefined {
return this.housingLocationList.find((housingLocation) => housingLocation.id === id); 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}.`,
);
}
} }