Filter data dengan menginput pada component/komponen lain menggunakan pipe di angular

Saya disini menggunakan Angular 5 saya ingin menginput pada app.component

 <input class="form-control" #searchText (keyup)="0" type="text" placeholder="Search" aria-label="Search">

yang nantinya akan di tampilkan di home.component

       <ng-container *ngFor="let s of data | FilterPipe : searchText.value">
        <tr>
          <td> <a [routerLink]="['/content/',s._id]">{{s.name}}</a></td>
          <td>{{s.author}}</td>
          <td>{{s.content}}</td>
        </tr>
      </ng-container>

Full code

FilterPipe

 import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'FilterPipe'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.name.toLowerCase().includes(searchText) || it.content.toLowerCase().includes(searchText);
    });
   }
}

App Component

app.component.ts

 import { Component } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.spec.ts

 import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
<div class="container">
    <div class="jumbotron">
        <h1>{{title}}</h1>
        <p>Description</p>
        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
                <a class="navbar-brand" [routerLink]="['/']">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExample09">
                  <ul class="navbar-nav mr-auto">
                    <li [routerLinkActive]="['active']">
                      <a class="nav-link" [routerLink]="['/home']">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li [routerLinkActive]="['active']">
                      <a class="nav-link" [routerLink]="['/login']">Login</a>
                    </li>
                  </ul>
                  <form class="form-inline my-2 my-md-0">
                    <input class="form-control" #searchText (keyup)="0" type="text" placeholder="Search" aria-label="Search">
                  </form>
                </div>
              </nav>
    </div>
<router-outlet></router-outlet>
</div>

Home Component

home.component.ts

 import { Component, OnInit, Inject } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private router:Router,private http:Http) {
   }

  title = 'Home';
  data: any = [];
  getData(){
    return this.http.get('http://localhost:3000/api').map((res: Response) => res.json()).subscribe(
      data => {
        console.log(data);
        this.data = data
      }
    )
  }

  ngOnInit() {
    this.getData();
  }

}

home.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

home.component.html

 <div class="container">
<div class="panel panel-default">
<div class="panel-heading">
  <p class="navbar-brand">{{title}}</p>
  <a type='button' href='/new' class="btn btn-primary navbar-btn"> Add Post +</a>
</div>
<div class="panel-body">

  <table class="table">
    <tr>
      <td>Nama Post</td>
      <td>Author</td>
      <td>Coba</td>
    </tr>
      <ng-container *ngFor="let s of data | FilterPipe : searchText.value">
        <tr>
          <td> <a [routerLink]="['/content/',s._id]">{{s.name}}</a></td>
          <td>{{s.author}}</td>
          <td>{{s.content}}</td>
        </tr>
      </ng-container>
  </table>
  </div>
</div>
</div>