CODEWITHSUNDEEP
angularfilterangularjs-filterpipes-filtersangular2-custom-pipes
hemanth koganti
hemanth koganti

Reputation: 103

angular2 pipe Template parse error

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 { }

Upvotes: 0

Views: 2870

Answers (3)

Suraj Rao
Suraj Rao

Reputation: 29614

As the other answers suggest you have to import FormsModule

Also you have set search.branch as ngModel which is not declared in the component typescript file.

And also you dont have to give declarations array in component decorator. Remove declarations: [LoanFilterPipe] from the @Component.

It is given in the NgModule.You dont have to put it in export unless you are going to use in another module.

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86730

you are missing FormsModule in your code

because according to angular FormsModule is must to add while bootstraping if you are using ngModel because as of now ngModel is a part of FormModule

Upvotes: 1

ranakrunal9
ranakrunal9

Reputation: 13558

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 { }

Upvotes: 4

Related Questions