data/event binding question

Hi, i'm new to Angular..
I am trying to do a filter pipe on a list of products.
The search box is in a seperate component and the prod list is in a seperate compoment.
i'm not able to get the 2 to communicate.

--------code snippet--------
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-top-bar',
templateUrl: './top-bar.component.html',
styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent implements OnInit {
searchword;
@Output() searchcriteria = new EventEmitter();
searchThis() {
this.searchcriteria.emit(this.searchword);
}
constructor() { }

ngOnInit() {
}

}

import { Component, OnInit, Input } from '@angular/core';
import { ProductService} from '../product.service';

// import * as products from '../phones/phones.json';
// import { products } from '../products';

@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})

export class ProductListComponent implements OnInit {
products;
@Input() searchCriteria;
// products: any = (products as any).default;
// products = products;
searchThis(data) {
window.alert(data); --> trying to get the searchText here.
}