ptran/yo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Search

Browse Source
This commit is contained in:
Phan Huy Tran 2024-11-13 10:37:29 +01:00
parent 8efd15a075
commit c794032bfd
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/home/home.component.html
View File

@ -1,12 +1,12 @@
<section class="my-5">
<form class="input-group">
<input class="form-control" type="text" placeholder="Filter by city"/>
<button class="btn btn-primary" type="button">Search</button>
<form class="input-group" (ngSubmit)="filterResults(filter.value)">
<input class="form-control" type="text" placeholder="Filter by city" #filter/>
<button class="btn btn-primary" type="submit">Search</button>
</form>
</section>
<div class="row g-4">
@for (housingLocation of housingLocationList; track housingLocation.id) {
@for (housingLocation of filteredLocationList; track housingLocation.id) {
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
</div>

15
src/app/home/home.component.ts
View File

@ -2,12 +2,14 @@ import {Component, inject} from '@angular/core';
import {HousingLocationComponent} from '../housing-location/housing-location.component';
import {HousingLocation} from '../housing-location';
import {HousingService} from '../housing.service';
import {FormsModule} from '@angular/forms';
@Component({
selector: 'app-home',
standalone: true,
imports: [
HousingLocationComponent
HousingLocationComponent,
FormsModule
],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
@ -15,8 +17,19 @@ import {HousingService} from '../housing.service';
export class HomeComponent {
housingLocationList: HousingLocation[] = [];
housingService: HousingService = inject(HousingService);
filteredLocationList: HousingLocation[] = [];
constructor() {
this.housingLocationList = this.housingService.getAllHousingLocations();
this.filteredLocationList = this.housingLocationList;
}
filterResults(text: string) {
if (!text) {
this.filteredLocationList = this.housingLocationList;
return;
}
this.filteredLocationList = this.housingLocationList.filter((housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()),);
}
}