Nested tables with filter in angular 2

Question

I need to nest 2 tables, the second one with a filter over the first. I've create a pipe but its not working because of this error (Looks like the pipe is not found): Error

This is the code of the page:

HTML

<table class="panelTable">
<tr *ngFor="let type of arrTypes">
    <td>
        <div class="title-1">{{'ASSESSMENTTYPE.' + type.Type | translate}}</div>
        <table class="panelTaskTable">
            <tr *ngFor="let t of arrTask | filterType: type.Type">
                 <td><h4>{{t.teacherName}}</h4></td>
                 <td>
                    <img src="./images/nochecked.png" *ngIf="t.Progress != 100" />
                    <img src="./images/checked.png" *ngIf="t.Progress == 100" />
                </td>
            </tr>
        </table>
    </td>
</tr>

TYPESCRIPT

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

@Pipe({ name: 'filterType' })
export class FilterType implements PipeTransform {
    transform(items: Array<TaskDTO>, Type: string): Array<TaskDTO> {

    if (!items)
        return null;
    else
        return items.filter(item => item.Type === Type);
    }
}

The expected result is something similar to this:

ExpectedResult

Any idea about how to solve this?

Thanks!

Answer 1

You have to declare your custom pipe in app.module.ts.

...
import { FilterType } from './filterType';

@NgModule({
  imports: [
    BrowserModule,
...
  ],
  declarations: [
    AppComponent,
   ...
    FilterType
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

I also recommend to rename your pipe to FilterTypePipe.