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

update step 13

Browse Source
This commit is contained in:
sanchezvem
2025-11-04 11:44:42 +01:00
parent 61397de9e5
commit bd8432e078
2 changed files with 26 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
first-app/src/app/details/details.html
View File

@@ -1,13 +1,32 @@
<article> <article>
<img class="listing-photo" [src]="housingLocation?.photo" <img
alt="Exterior photo of {{ housingLocation?.name }}" crossorigin/> class="listing-photo"
<section class="listing-description"><h2 class="listing-heading">{{ housingLocation?.name }}</h2> [src]="housingLocation?.photo"
<p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p></section> alt="Exterior photo of {{ housingLocation?.name }}"
<section class="listing-features"><h2 class="section-heading">About this housing location</h2> crossorigin
/>
<section class="listing-description">
<h2 class="listing-heading">{{ housingLocation?.name }}</h2>
<p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
</section>
<section class="listing-features">
<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>
<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> </article>

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

@@ -6,42 +6,10 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
@Component({ @Component({
selector: 'app-details', selector: 'app-details',
imports: [ReactiveFormsModule], imports: [ReactiveFormsModule],
template: ` templateUrl: 'details.html',
<article>
<img
class="listing-photo"
[src]="housingLocation?.photo"
alt="Exterior photo of {{ housingLocation?.name }}"
crossorigin
/>
<section class="listing-description">
<h2 class="listing-heading">{{ housingLocation?.name }}</h2>
<p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
</section>
<section class="listing-features">
<h2 class="section-heading">About this housing location</h2>
<ul>
<li>Units available: {{ housingLocation?.availableUnits }}</li>
<li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
<li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
</ul>
</section>
<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);