Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

80
Vistas
Problems with search input in angular

I want while typing a word, to have items listed with just that word in the title or header. This my method don't return anything. What shuold i do?

This is my html

<input type="text" (change)="component.performFilter($event)"/>
<div *ngFor="let report of component?.reports" class="pr-5 pt-2" style="width: 350px;">
    <h3>{{report.header | translate}}</h3>
    <ul class="list-unstyled pl-1">
        <li *ngFor="let item of report.items">
            <i class="fa {{item.icon}} mr-h"></i>
            <a class="link" [routerLink]="item.path"> {{item.title}} </a>
            <p *ngIf="item.description" class="text-muted">{{item.description}}</p>
        </li>
    </ul>
</div>

This is my TS

protected reports: Array<ReportItemsModel> = [];
protected filteredReports = [];

_listFilter: string = '';

get listFilter(): string {
    return this._listFilter;
}
set listFilter(value: string) {
    this._listFilter = value;
    this.filteredReports = this.performFilter(value);
}

constructor(
    protected route: ActivatedRoute,
    protected httpService: HttpService
) {
    super(route);

    this.titleIcon = 'fa-bar-chart';
    this.titleSufixKey = 'reports';
}

performFilter(filterBy: any) {
    filterBy = filterBy.target.value;
    return this.reports.filter((report) =>
        report.header.toLocaleLowerCase().includes(filterBy)
    );
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda