CODEWITHSUNDEEP
angularpipe
Tali
Tali

Reputation: 77

Angular - filtering a table using pipe

I'm new to angular and trying to make my first fullstack program, I'm using angular and spring boot. What i'm trying to do it to get files from my server and display them in a table using angular. I managed to do this, but now I want to add a filltering option on the table and I was using pipes to do so, but it won't seem to work, the truble I'm having is in the html part on my 

*ngFor="let file of files | async ; let i = index ">

Can't find a way to write all the conditions without getting a error

Here is my client side code: the html part:

<div class="panel panel-default">
<div class="panel-heading">
    <h1>Files</h1>
</div>
<div class="panel-body">

    <form>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon">
              <i class="glyphicon glyphicon-search"></i>
            </div>
            <input
              type="text"
              class="form-control"
              name="searchString"
              placeholder="Type to search..."
              [(ngModel)]="searchString"
            />
          </div>
        </div>
      </form>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th>Location</th>
                <th>Timestamp</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let file of files | async ; let i = index ">
                <th scope="row">{{ i + 1 }}</th>
                <td>{{file.location}}</td>
                <td>{{file.timestamp}}</td>
                <td>{{file.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

and the pipe:

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
 name: 'filter'
 })
 @Injectable()
 export class SearchPipe implements PipeTransform {
 transform(items: any[], field: string, value: string): any[] {
  if (!items) {
  return [];
    }
   if (!field || !value) {
    return items;
  }

return items.filter(singleItem =>
  singleItem[field].toLowerCase().includes(value.toLowerCase())
);

} }

and the file listing ts:

export class FileListComponent implements OnInit {

files: Observable<File[]>;
searchString: string;
constructor(private fileService: FileService) {}

ngOnInit() {
  this.reloadData();
 }

reloadData() {
  this.files = this.fileService.getFileList();
 }

}

I was getting help from this tutorial over here for the pipes part: https://offering.solutions/blog/articles/2016/11/21/how-to-implement-a-table-filter-in-angular/

and it says the ngFor should look like this:

<tr
*ngFor="let food of foods | filter : 'name' : searchString; let i = index"

>

but since I also have the | async I can't get to put all the conditions.. I'm guessing that's the problem..

HOW can I write something like <tr *ngFor="let file of files | async ; filter : 'name' : searchString; let i = index "> ?

Any help would be appreciated

Upvotes: 2

Views: 4707

Answers (1)

Goga Koreli
Goga Koreli

Reputation: 2947

Use parentheses like so:

*ngFor="let food of (foods | async) | filter : 'name' : searchString; let i = index"

Have a look at StackBlitz demo

Upvotes: 1

Related Questions