components with input and output

search-box.component.css

.btn-clear {
    background: #DE363F;
    color: white;
    font-weight: bold;
    border-radius: 4px;
}

search-box.component.html

<input placeholder="{{text}}" #box
       (keydown.enter)="onSearch(box.value)">

<button class="btn-clear" (click)="clear(box)">Clear</button>

search-box.component.ts

import {Component, Input, EventEmitter, Output} from "@angular/core";

declare const module;

@Component({
    selector: 'search-box',
    moduleId: module.id,
    templateUrl: 'search-box.component.html',
    styleUrls: ['search-box.component.css'] 
})
export class SearchBox {

    @Input()
    text:string;

    @Output()
    search = new EventEmitter();

    clear(box) {
        box.value = '';
    }

    onSearch(searchText) {
        this.search.emit(searchText);
    }
}