i am trying to implement a simple search using pipes. I am really new to the concepts of pipe and angular2, so i need your help
here is my html:
<input type="textarea" placeholder="branch" [(ngModel)]="search.branch" name="branch">
<tr *ngFor="let loan of loans | loanfilter:search.branch ">
<td><input type="checkbox"></td>
<td>{{loan.loanId}}</td>
<td>{{loan.custName}}</td>
<td>{{loan.vehicleNum}}</td>
<td>{{loan.TC}}</td>
<td>{{loan.RE}}</td>
</tr>
loan.component.ts:
import { Component } from '@angular/core';
import { LoanService } from '../../services/loans.service';
import { Loan } from '../../../loan';
import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { LoanFilterPipe } from '../../pipes/loan.pipe';
@Component({
moduleId: module.id,
selector: 'loans',
templateUrl: './loans.component.html',
providers: [LoanService],
declarations: [LoanFilterPipe] //getting error on this line: Object literal may only specify known properties, and 'declarations' does not exist in type 'Component'.
})
export class LoansComponent{
loans : Loan[];
custName: any;
constructor(private loanService: LoanService){
this.getloans();
};
getloans(){
this.loanService.getLoan()
.subscribe(loans => {
this.loans = loans;
console.log(loans);
});
}
};
the errors i am getting are:
Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'
loan.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'loanfilter'
})
export class LoanFilterPipe implements PipeTransform{
transform(loans: any[], args: any): any{
return loans.filter(item => item.title.indexOf(args[0].title) !== -1);
}
}
I have also used a module.ts file to declare the pipe and all other components:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { LoansComponent } from './components/loans/loans.component';
import { LoanFilterPipe } from './pipes/loan.pipe';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent, LoansComponent, LoanFilterPipe ],
bootstrap: [ AppComponent ],
exports: [LoanFilterPipe]
})
export class AppModule { }
Import FormsModule
in you app module.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { LoansComponent } from './components/loans/loans.component';
import { LoanFilterPipe } from './pipes/loan.pipe';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, HttpModule, FormsModule ],
declarations: [ AppComponent, LoansComponent, LoanFilterPipe ],
bootstrap: [ AppComponent ],
exports: [LoanFilterPipe]
})
export class AppModule { }