prevent default of click event when keyup event ocuurs in angular2

Question

In search input field when keyup event is fired, data showing, after keyup event is fire again click event is working, but I want once keyup or click is fired other one will not work.

Here is my form in header.html

<form>
     <div class="box">
         <div class="container-1">
            <input type="search" id="search" placeholder="Type 
                 your search..." name="searchStr" (keyup.enter)="searchKey(input.value)" 
                [(ngModel)]="searchStr" #input>
            <a (click)="searchKey(input.value)"><img 
              src="/assets/search.png" class="search-img"></a>
        </div>
     </div>
</form>

Here is my header.component.ts

searchKey(value: any) {
    console.log(value);
    this.router.navigate(['search', { searchkey : value }]);
}

thank you in advance.

Answer 1

Try to set a flag variable which will checks whether to search or not like,

export ... {

    flag = true;

    searchKey(value: any) {
        console.log(value);
        this.flag && this.router.navigate(['search', { searchkey : value }]);
        this.flag=false;
    }

    // don't forget to add a condition when flag must be set to true.
}

Hope this will help you.