Angular 2 Pipe Filter for rendering Array

Question

I Have problem for rendering the items in the array using search pipe this is my app.module:

import {NgModule}      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';    
import { AppComponent }  from './app.component';
import {FormsModule} from "@angular/forms";
import {CombBox} from "./ComboBox/ComboBox.component";
import {SortPipe} from "./ComboBox/Sort.pipe";
import {SearchPipe} from "./ComboBox/Filter.pipe";

@NgModule({
  imports:      [ BrowserModule,  FormsModule],
  declarations: [ AppComponent ,CombBox ,SortPipe,SearchPipe],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

And This is my Search Pipe

import {Pipe, PipeTransform} from '@angular/core';
import {Hero} from "../hero";
@Pipe({
  name : 'searchPipe',
  pure:false
})

export class SearchPipe implements PipeTransform {
  transform(items: Array<Hero>, letter: string): any {
    return items.filter(item => item.name.toUpperCase().indexOf(letter)>-1);
  }
   }

and this is my Html View

<div class="InputHolder">
  <input type="text" class="Input-text" (keyup)="checkkey($event)"  (keyup.enter)="AddHero(Inputtxt.value)" (focus)="OnfocusFunction()" (focusout)="focusOutFunction()"  #Inputtxt/>
</div>
<div class="UlHolder">
  <ul class="heroes" id="hello" *ngIf="IsVisable"  >
    <li  *ngFor="let hero of heroes | sort |searchPipe: Inputtxt.value">
      {{hero.name}}
    </li>
  </ul>
</div>

I Cannot access the data of the array of heroes that i created and show the selected item of search because when i just enter the search pipe all data in the view of the list is disappeared

Try to insert as first line to transform() if(!items || !letter) return;` — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 12, 2017 at 10:34

Mohamed Gabr · Accepted Answer · 2017-01-12 12:12:11Z

2

import {Pipe, PipeTransform} from '@angular/core';
import {Hero} from "../hero";
@Pipe({
  name : 'searchPipe',
  pure:false
})

export class SearchPipe implements PipeTransform {
  transform(items: Array<Hero>, letter: string): any {
    return items.filter(item => item.name.toUpperCase().indexOf(letter.toUpperCase())>-1);

answered Jan 12, 2017 at 12:12

Mohamed Gabr

4415 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 Pipe Filter for rendering Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related