import { Component } from '@angular/core' ; import { Router } from '@angular/router' ; import { FormControl } from '@angular/forms' ; @ Component ( { selector : 'db-product-search' , templateUrl : 'app/product/product-search.component.html' } ) export class ProductSearchComponent { disabled : boolean = true ; seachControl : FormControl ; constructor ( private router ) { } ngOnInit ( ) { this . seachControl = new FormControl ( ) ; this . seachControl . valueChanges . subscribe ( ( value ) => { this . searchChanged ( value ) ; } ) ; } searchProduct ( value ) { this . router . navigate ( [ '/products' ] , { queryParams : { search : value } } ) ; } searchChanged ( value ) { if ( value ) { this . disabled = false ; } else { this . disabled = true ; } } }