Angular 4 - Limiting number of table rows displayed

Question

I have a list of entries that I am looping through and fore each entry I have add a row to a table. I have about 2000 entries so it takes a second for the table to render. How would I limit this down to 50 or 100?

<ng-container *ngFor="let entry of entries">
  <tr *ngIf="entry['name'].startsWith(filter)">
    <td>{{ entry.name }}</td>
  </tr>
</ng-container>

This question is different from this one because I still want the rows to be there I just want only 100 to be shown at a time.

if the limit is constant, why not just return limited result set from the query? — Harry, May 13 '17 at 18:08
@Haris I want all of the data to be able to be found through the filter I just don't want the initial 2000 before you begin to search — Caleb Bassham, May 13 '17 at 18:10
Possible duplicate of [How can I limit ngFor repeat to 10 items in Angular 2?](http://stackoverflow.com/questions/37818677/how-can-i-limit-ngfor-repeat-to-10-items-in-angular-2) — Jan B., May 13 '17 at 18:14
@Matt That does limit the rows but then the filter does not work for the items not being shown which is not what I want. — Caleb Bassham, May 13 '17 at 18:23
Ah, sorry. I guess you should filter your entire list in the component and pass only the filtered array your table. Using async pipes should reduce the waiting time. — Jan B., May 13 '17 at 18:50

score 1 · Accepted Answer · answered May 13 '17 at 19:24

I suggest you to create a pipe to filter the items by name that starts with a specific char.

Can be something like this:

@Pipe({
  name: 'startsWith'
})
export class StartsWithPipe implements PipeTransform {

  transform(items: any[], prop: string, term: string): any[] {
    if (!Array.isArray(items) || !term) {
      return items;
    }

    const strTerm: string = term.toLowerCase();

    return items.filter(item => {
      return item[prop] && item[prop].toLowerCase().startsWith(strTerm);
    });
  }
}

So, in template, you combine the startsWith pipe with SlicePipe:

<div *ngFor="let item of items | startsWith: 'name': nameFilter | slice: 0: limit">
  {{item.name}}
</div>

Note that nameFilter and limit are variables.

DEMO

Thanks a lot, the demo really helped. – Caleb Bassham May 13 '17 at 19:50 — Caleb Bassham, May 13 '17 at 19:50

Angular 4 - Limiting number of table rows displayed

1 Answers1