将输入从component.html发送到component.ts

Question

I'm doing a search, and I'm receiving the value I need to search from the User on my component.html .

I'm sending the data to the component.ts like the code below.

<input class="form-control mr-sm-2" #query (keyup.enter)="search(query.value)">
<a class="btn btn-light my-2 my-sm-0" (click)="search(query.value)">Buscar</a>

And in my component.ts I've the following code

search(query: string) {
    if (query !== '') {
        window.location.href = 'http://mydomain/result.html?name=' + query;
    }
}

My doubt is, why the window.location.href always change the current URL in the browser on Firefox Developer Edition , and only sometimes on Google Chrome and Firefox Quantum .

If I click on the button , It always work as expected, but if I hit the enter , It work only sometimes on the other 2 browsers, and I don't know why this is happening, can you guys help me with that?

• EDIT

I've noticed while debugging that, when I hit enter, it doesn't call the function search .

Answer 1

You are using (keyup.enter) when in reality you want (key.enter) . Also, you don't need a reference #query . You could write input as:

<input class="form-control mr-sm-2" (key.enter)="search($event)">

In the method use:

search(event: Event) {
    const query = (event.target as HTMLInputElement).value;

    if (query !== '') {
        window.location.href = 'http://mydomain/result.html?name=' + query;
    }
}

It seems that FireFox is catching keyup and not enter .

Answer 2

I've found a solution, I've changed the <input> tag content and the tag <a> to <button> , like the code below

<input type="text" class="form-control mr-sm-2" [(ngModel)]="query" name="busca">
<button type="submit" class="btn btn-light my-2 my-sm-0" (click)="search()">Buscar</button>

And in my component I've the code below

export class MyComponent implements OnInit {
    query = ''; // Global variable in my component

    constructor() {}

    ngOnInit() {
    }

    search() {
        if (this.query !== '') {
            window.location.href = 'http://mydomain/result.html?name=' + this.query;
        }
    }
}

And on my app.module.ts I've added the following lines

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // Imported the FormsModule here

import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule  // Added the FormsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }