Pass data from the HTML component to the TypeScript component

Question

Pass data from the HTML component to the TypeScript component

When conducting a search, I prompt the user to enter the value they are looking for in my component.html.

The data is then sent to the component.ts using the following code:

<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)">Search</a>

In my component.ts, the function looks like this:

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

I'm puzzled as to why window.location.href always changes the current URL in the browser when using Firefox Developer Edition, but only sometimes does so in Google Chrome and Firefox Quantum.

Clicking on the button consistently works as expected, but hitting "enter" only triggers the function occasionally in the other two browsers. I'm unsure why this discrepancy occurs and would appreciate any insights or solutions you may have to offer.

EDIT

Upon debugging, it appears that pressing "enter" doesn't always execute the search function.

javascript angular typescript

Answer 1

Answer №1

Instead of (keyup.enter), you should be using (key.enter). Also, there is no need for the reference #query. Update your input tag to:

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

Modify your method as follows:

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

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

FireFox may interpret keyup differently than enter.

Answer 2

Instead of (keyup.enter), you should be using (key.enter). Also, there is no need for the reference #query. Update your input tag to:

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

Modify your method as follows:

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

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

FireFox may interpret keyup differently than enter.

Answer 3

Answer №2

I stumbled upon a solution by making changes to the <input> tag content and replacing the <a> tag with <button>, see the updated 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>

In my component, I have implemented the following:

export class MyComponent implements OnInit {
    query = ''; // This is a global variable in my component

    constructor() {}

    ngOnInit() {
    }

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

I made corresponding changes in my app.module.ts file as well:

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

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

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

Answer 4

I stumbled upon a solution by making changes to the <input> tag content and replacing the <a> tag with <button>, see the updated 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>

In my component, I have implemented the following:

export class MyComponent implements OnInit {
    query = ''; // This is a global variable in my component

    constructor() {}

    ngOnInit() {
    }

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

I made corresponding changes in my app.module.ts file as well:

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

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

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

Pass data from the HTML component to the TypeScript component

Answer №1

Answer №2

Similar questions

Encountering a 404 error with systemjs-angular-loader.js in a production environment

Testing a React component using the `ua-parser-js` plugin with Jest and React Testing Library

Executing a JavaScript utility before running a collection in Postman: Step-by-step guide

Using jQuery to set cookies for multiple domains

Are DOM Events compatible with ajax-loaded content that cannot be unloaded?

running a loop with a data-attribute conditional statement causes the browser to crash

Is it possible to extract the value from the JSON response using this.responseText?

Turning off and on CSS transitions to set the initial position

PhantomJS encountered an issue: Attempting to access the 'write' member of a deleted QObject is not allowed

Tips on fixing the Angular error: "Argument of type '" | "" | Date' is not compatible with the parameter type 'string | number | boolean."

Updating state in React is not possible

Merge the properties of two class instances deeply

How to use Javascript to set focus on a dropdown list within a PHP script

NuxtJs login feature is functional, but encounters an unauthorized 401 error

Having difficulty populating a selection box through an ajax request in Django

Navigating a Facebook page login can have its challenges. Let's uncover the

Embedding HTML code in JavaScript

What is the best way to capture and store the chosen text in a Kendo multiselect variable?

I encountered a ReferenceError while working on my Google Authentication code, specifically stating that the variable "id" is not defined

Using jQuery effects on your PHP message to give it an interactive touch - here's how!