How to filter an array on user input in Angular 2

Question

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

Hootan Alavizadeh · Accepted Answer · 2017-05-12 00:28:42Z

1

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>
  `
})

answered May 12, 2017 at 0:28

Hootan Alavizadeh

4112 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2017-03-08 12:57:12Z

0

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

answered Mar 8, 2017 at 12:57

Amit

4,35323 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to filter an array on user input in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related