Search code examples
angularngfor

*ngFor with filter pipe and slice doesn't work

I have a component with search field and list of users inside ngFor element. My goal is to show only first 10 users from the list. Here is html part:

<div class="admins-box-input">
   <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}">
   <div class="card-user" *ngFor="let admin of admins | slice:0:10; filter:term">
     <img src="{{admin?.avatar}}" alt="">
     <h2>{{admin?.first_name}} {{admin?.last_name}}</h2>
   </div>
</div>

But I keep getting this error - Can't bind to 'ngForFilter' since it isn't a known property of 'div'. ("xt" [(ngModel)]="term" [ngModelOptions]="{standalone: true}"> <div class="card-user" [ERROR ->]*ngFor="let admin of admins | slice:0:10; filter:term"> <img src="{{admin?.avatar}}""): ng:///AppModule/GroupCreateComponent.html@72:37 Property binding ngForFilter not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}"> [ERROR ->]<div class="card-user" *ngFor="let admin of admins | slice:0:10; filter:term"> Any help would be appreciated. I'm using Ng2SearchPipeModule here, and this pipe works well - *ngFor="let admin of admins | filter:term" but when I try to add something in it, it breaks.

Solution

  • apply multiple pipes like so:

    let admin of admins | slice:0:10 | filter:term