CODEWITHSUNDEEP
angularfilter
Gaurav Mehta
Gaurav Mehta

Reputation: 11

How to filter an array on user input in Angular 2

am trying to filter an array on user input in an input box but am unable to do so.

the method in Angular JS 1 i used was 

<div ng-app="myApp" ng-controller="namesCtrl">

<p>Type a letter in the input field:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test">
    {{ x }}
  </li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

Thanks in advance

Upvotes: 1

Views: 3574

Answers (2)

Hootan Alavizadeh
Hootan Alavizadeh

Reputation: 411

you need to make your own pipe somthing like this:

import {Injectable, Pipe} from 'angular2/core';

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

save above file as 'filter-pipe.ts'

then use this in your component

import { FilterPipe } from './filter-pipe';

@Component({
  selector: 'your-component',
  pipes: [ FilterPipe ],
  template: `
    <ul>
      <li *ngFor="#item of (items | filter:some_variable)">{{item.name}}</li>
    </ul>
  `
})

Upvotes: 1

Amit
Amit

Reputation: 4353

In angular2 you don't get the filter pipe out of the box, you have to implement it yourself.

Read up on it here: https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe

Upvotes: 0

Related Questions