After struggling to customize answers for similar questions, I find myself in need of some assistance.
My current challenge involves using an angular pipe to filter the following data structure:
subjects = [
{ name: "subject1", keywords:["keyword1", "keyword2", "keyword3"]},
{ name: "subject2", keywords:["keyword1", "keyword2", "keyword3"]},
];
I attempted to adapt an example with a simpler data structure:
subjects = [ "subject", "subject2"]
along with this custom pipe :
@Pipe({
name: 'SearchPipe'
})
export class FilterPipe implements PipeTransform {
transform(value: any, input: any): any {
if (input) {
return value.filter(val => val.toLowerCase().indexOf(input.toLowerCase()) >= 0);
} else {
return value;
}
}
}
However, I am struggling to adapt it to my specific use case.
The objective is to filter the data by keyword and display the matching names:
Edit: HTML Template:
<div class="welcome-content" fxFlex="80">
<div class="search-container">
<mat-form-field class="textfield" appearance="standard">
<mat-label>z.B. Flugverspätung</mat-label>
<input class="input" matInput [(ngModel)]=subject>
</mat-form-field>
</div>
<div class="subject-container">
<div class="subject-list">
<div class="subjects" *ngFor="let subject of subjects | SearchPipe: subject">
<div class="subject-wrapper">
<a mat-button class="control-button" (click)="goToChat(subject)">{{subject.name}}</a>
</div>
</div>
</div>
</div>
</div>
Any advice or tips would be greatly appreciated.