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"> <section class="my-5">
<form class="input-group"> <form class="input-group" (ngSubmit)="filterResults(filter.value)">
<input class="form-control" type="text" placeholder="Filter by city"/> <input class="form-control" type="text" placeholder="Filter by city" #filter/>
<button class="btn btn-primary" type="button">Search</button> <button class="btn btn-primary" type="submit">Search</button>
</form> </form>
</section> </section>
<div class="row g-4"> <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"> <div class="col-12 col-md-6 col-lg-4 col-xl-3">
<app-housing-location [housingLocation]="housingLocation"></app-housing-location> <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
</div> </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 {HousingLocationComponent} from '../housing-location/housing-location.component';
import {HousingLocation} from '../housing-location'; import {HousingLocation} from '../housing-location';
import {HousingService} from '../housing.service'; import {HousingService} from '../housing.service';
import {FormsModule} from '@angular/forms';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
standalone: true, standalone: true,
imports: [ imports: [
HousingLocationComponent HousingLocationComponent,
FormsModule
], ],
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrl: './home.component.css' styleUrl: './home.component.css'
@ -15,8 +17,19 @@ import {HousingService} from '../housing.service';
export class HomeComponent { export class HomeComponent {
housingLocationList: HousingLocation[] = []; housingLocationList: HousingLocation[] = [];
housingService: HousingService = inject(HousingService); housingService: HousingService = inject(HousingService);
filteredLocationList: HousingLocation[] = [];
constructor() { constructor() {
this.housingLocationList = this.housingService.getAllHousingLocations(); 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()),);
} }
} }