CODEWITHSUNDEEP
angulartypescript
Eduard Arevshatyan
Eduard Arevshatyan

Reputation: 678

filter in angular 2 table app

I`ve created a simple table application in angular 2.

And now, my task is create a filter of data in <input> tag.

<tr>
      <td><input type="" name="" value=""></td>
      <td><input type="" name="" value=""></td>
      <td></td>
      <td></td>
      <td><input type="" name="" value="" size="7" (keyup)="_service.getServices()"></td>
</tr>

i get data with this: 

private _url = 'http://150.746.21.851/api/v1/';

constructor(private _http: Http) {

}

getServices(): Observable<any> {
    return this._http.get(this._url)
        .map(res => res.json())
}

And this is _service

constructor(public _service: TableComponentService) {

    }

    ngOnInit() {
        this._service.getServices()
            .subscribe(lists => this.lists = lists)
    }

I dont have any logs of errors. When i input some word in <input>, nothing happens. Maybe mistake in syntax?

UPD:

@Component({
selector: 'tablecomponent',
templateUrl: 'app/table.template.html',
providers: [TableComponentService]
})
export class TableComponent implements OnInit {
lists: any[];

constructor(public _service: TableComponentService) {

    }

    ngOnInit() {
        this._service.getServices()
            .subscribe(lists => this.lists = lists)
    } 

}

and this is part of template: 

<table class="table table-bordered table, table table-hover">
        <thead>
            <tr>
                <td colspan="10" align="center">Перечень объектов по теме</td>
            </tr>
            <tr>
                <th>vol 1</th>
                <th>vol 2</th>
                <th>vol 3</th>
            </tr>
            <tr style="background: #F5F5F5">
                <td><input type="" name="" value=""></td>
                <td><input type="" name="" value=""></td>
                <td></td>
                <td></td>
                <td><input type="" name="" value="" size="7" (keyup)="_service.getServices()"></td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor='let list of lists'>
                <td contenteditable="true">{{ list.name }}</td>
                <td contenteditable="true">{{ list.location }}</td>
            </tr>
         <tbody>

Upvotes: 1

Views: 1124

Answers (1)

Csaba
Csaba

Reputation: 2086

You need to create a custom pipe to filter your data.
1. Create a new file for your custom pipe ex: my-filter.pipe.ts

1.1. Inside this file you will need to import Pipe and PipeTransform from the angular core.

import { Pipe, PipeTransform } from '@angular/core';

1.2. give your custom pipe a name

@Pipe({
        name: 'myListFilter'
})

1.3. implement the PipeTransform interface and use the transform() method to transform the value and return it

export class MyFilterPipe implements PipeTransform {
        transform(value: lists[], args: string[]): lists[] {
            // your javascript code goes here
        }
}


2. In your main module.ts import the custom pipe that you've created

import { MyFilterPipe } from './my-filter.pipe'

2.1. and add it to the declarations: array

declarations: [ MyFilterPipe ]


3. In Your table.component.ts class add this:

listFilter: string = '';


4. In your template add an input field and use ngModel for Two Way Data Binding:

<input type="text" [(ngModel)]="listFilter" />


4. anf finally apply the custom pipe to your element using the | operator:

<tr *ngFor='let list of lists | myListFilter: listFilter'>



You can see an example of Filtering with Input here: http://plnkr.co/qwsk86hHLbI26w3HVMdV

Upvotes: 1

Related Questions