Trying to implement an autocomplete input feature for any field value, I decided to create a custom pipe for this purpose.
One challenge I'm facing is how to connect the component displaying my JSON data with the component housing the autocomplete input?
Should I utilize the @Input and @Output decorators for this task?
As a beginner, I'm a bit lost on how to proceed with this setup.
Any help or guidance on this matter is greatly appreciated.
json.file
{
"boatType": "Semi-rigide",
"img": "/assets/img/boat-img/semi-rigide.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": false,
"annexe": true
},
table.component.html
<div class="search">
<app-input #inputComponent></app-input>
</div>
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col" class="toto">img</th>
<th scope="col">Type de bateau</th>
<th scope="col">longeur</th>
<th scope="col">largeur</th>
<th scope="col">tirant d'eau</th>
<th scope="col">equipage</th>
<th scope="col">annexe</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let boat of user | filter : inputComponent?.searchText">
<td data-label="img"><img [src]="boat.img" alt="boat" class="img"></td>
<td data-label="boat type">{{ boat.boatType }}</td>
<td data-label="longeur">{{boat.longeur}} cm</td>
<td data-label="largeur">{{boat.largeur}} cm</td>
<td data-label="tirant d'eau">{{boat.tirantEau}} cm</td>
<td data-label="equipage">{{boat.equipage ? "Oui" : "Non"}}</td>
<td data-label="annexe">{{boat.annexe ? "Oui" : "Non"}}</td>
</tr>
</tbody>
</table>
input.component.html
<input type="text" placeholder="Chercher un bateau.." [(ngModel)]="searchText">
filter.pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
// TODO: need to improve this filter
// because at this moment, only filter by boatType
return items.filter(item => {
return item.boatType.toLowerCase().includes(searchText.toLowerCase());
});
}
}