I am facing a challenge with implementing filtering functionality in an input box within a form in Angular 12. Despite my efforts, I have been unable to get the pipe working correctly in the component and consequently in the view.
HTML
<form #form="ngForm" >
<div class="form--inline clearfix d-flex">
<div class="form-item">
<label for="edit-combine">Search Reports</label>
<div class="inner-addon left-addon" style="position: relative">
<i class="bi bi-search" style="position: absolute; padding: 5px; pointer-events: none; font-size: 1rem"></i>
<input style="padding-left: 30px" placeholder="Search" type="text" id="edit-combine" name="combine" value="" size="30" maxlength="128" class="form-text form-control" [(ngModel)]="titleList">
</div>
</div>
<div id="edit-actions">
<input type="submit" class="button" (click)="onSubmit()" id="edit-submit-buscador-de-informes" value="">
</div>
<div *ngFor="let flex of informesTitle">
{{flex}}
</div>
</div>
</form>
TS Component
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { FlexSlider, FrontService, InformesCounter } from './front.service';
import { FrontPipe } from './front.pipe';
@Component({
selector: 'app-front',
templateUrl: './front.component.html',
providers: [ FrontService, FrontPipe ],
styleUrls: ['./front.component.sass']
})
export class FrontComponent implements OnInit {
error: any;
...
showInformes() {
...
this.filteredText = new FrontPipe().transform(this.titleList);
});
}
onSubmit(){
console.log(this.filteredText)
}
TS PIPE
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'front'
})
export class FrontPipe implements PipeTransform {
transform(items: any): any {
...
}
}
Despite my best efforts, I have been unable to successfully integrate the pipe into the component that receives JSON data from a service in order to filter results. Any assistance is greatly appreciated. Thank you.