I have a list in my application that's being displayed in a table using *ngFor. This list can have 10, 50, or 100 items displayed on the page at a time. I want the user to be able to control the amount of items displayed in the table, so I created a Pipe directive that passes the value controlled by a dropdown input:
<select class="form-control" [(ngModel)]="aIndex">
<option id="10" value="10" selected="selected">10</option>
<option id="50" value="50">50</option>
<option id="100" value="100">100</option>
</select>
<table>
<tbody>
<tr *ngFor="let item of aList | aIndexPipe: 'aIndex'>
...
</tr>
</tbody>
</table>
My pipe code looks like:
import {Component, Inject, OnInit, Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: "aIndexPipe"
})
export class AIndexPipe implements PipeTransform {
transform(array: Array<any>, arg1:any): Array<string> {
var newArray =[];
for(let i=0;i<arg1;i++) {
newArray.push(array[i]);
}
return newArray;
}
}
The list is always transformed to be empty, no matter what I select. Am I passing the arguments wrong? Do I have to call an update function whenever I pass a new value to the ngModel variable?