I am trying to do filter a number from a number array. but I got this errors.this a my codes.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NumberFilterPipe } from './number-filter.pipe';
import { FormsModule } from '@angular/forms';
import { StringFilterPipe } from './string-filter.pipe';
import { NumberFilterService } from './service/number-filter.service';
@NgModule({
declarations: [
AppComponent,
NumberFilterPipe,
StringFilterPipe
],
imports: [
BrowserModule,
FormsModule
],
providers: [
NumberFilterService],
bootstrap: [AppComponent]
})
export class AppModule { }
this the my html
<input name= "searchtext" [(ngModel)]="searchtext">
{{searchtext}}
<li *ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li>
<br><br>
this the pipe
import { Pipe, PipeTransform } from '@angular/core';
import { NumberFilterService } from './service/number-filter.service';
@Pipe({
name: 'number-filter'
})
export class NumberFilterPipe implements PipeTransform {
flterNumber: NumberFilterService;
transform(numbers: any, key: any): any[] {
return this.flterNumber.filterNumber(numbers, key);
}
}
and this the service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class NumberFilterService {
arrayLen = 0;
itteration = 0;
result = [];
constructor() { }
filterNumber(values: any[], key: any): any[] {
this.arrayLen = values.length;
for (this.itteration = 0 ; this.itteration < this.arrayLen ; this.itteration ++ ) {
if (key === values[this.itteration]) {
this.result.push(values[this.itteration]);
}
}
return this.result;
}
}
and I got this errors.
"Uncaught Error: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("<input name= "searchtext" [(ngModel)]="searchtext">
{{searchtext}}
<li [ERROR ->]*ngFor = "let numbers of number | number-filter : searchtext ">{{numbers}}</li>
<br><br>"): ng:///AppModule/AppComponent.html@2:4
Parser Error: Unexpected token -, expected identifier, keyword, or string at column 31 in [let numbers of number | number-filter : searchtext ] in ng:///AppModule/AppComponent.html@2:4 ("l)]="searchtext">
{{searchtext}}
<li *ngFor = "let numbers of number | number-filter : searchtext ">[ERROR ->]{{numbers}}</li>
<br><br>"): ng:///AppModule/AppComponent.html@2:67
at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:684)
at TemplateParser.parse (webpack-internal:///../../../compiler/esm5/compiler.js:24547)
at JitCompiler._parseTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33975)
at JitCompiler._compileTemplate (webpack-internal:///../../../compiler/esm5/compiler.js:33950)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33852)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33852)
at eval (webpack-internal:///../../../compiler/esm5/compiler.js:33722)
at Object.then (webpack-internal:///../../../compiler/esm5/compiler.js:673)
at JitCompiler._compileModuleAndComponents (webpack-internal:///../../../compiler/esm5/compiler.js:33721)"
I hope your valuable solution for this.thanks all . Have a nice day.
I found this way its working
Pipe.ts
component template
component ts
Final update which is working
Below is fully tested and working
html template file
pipe.ts file
Filter SErvice file
Updates end here
problem in below line: in your filter "number-filter" searchtext is not used but you are using in html. thats the problem try "key" instead of "searchtext" in html