Passing the user input from a textbox to a directive's input string in Angular 9 using Typescript

Is it possible to transfer the value entered in a textbox to another directive's input variable without utilizing ngModel? I am curious about how this can be accomplished. Here is the code snippet:

HTML : 

<input type="text" placeholder='Enter text here' /> **This textbox stores the user's input** 
<searchDirective [searchText]=''></searchDirective> **The goal is to pass the value from the textbox to the [searchText] input variable**

*In searchDirective.component.ts :*

export class searchDirective implements OnInit {

@Input() searchText: string;

ngOnInit(): void {}

@HostListener('click', ['$event']) onClick($event) {
 **I need to extract the user input value from the textbox on this click event** 
}

}

Answer №1

Give this a try

Make sure to create a reference named #inputRef in the input element and then pass that value into the searchDirective component (both elements should be in the same HTML file) using inputRef.value since input has a value property.

Here is how you can structure your HTML:

<input type="text" placeholder='Type here'  #inputRef /> **Use this textbox to capture the user's input and reference it with #inputRef for easy access**
<searchDirective [searchText]='inputRef.value'></searchDirective>

Answer №2

If you're looking for an alternative to using ngModel and template reference, here's another approach:

<input type="text" placeholder='Enter text here' id="search"/>
<searchDirective [searchText]='inputValue' (click)="doSearch()"></searchDirective>

Within the component that includes the above HTML template, create a field called inputValue and define a doSearch method like this:

doSearch() {
    this.inputValue = document.getElementById("search").value
}

You can then perform operations on the input value within the ngOnChanges lifecycle hook of your searchDirective:

ngOnChanges() {
    // Perform operations on searchText value here
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: React - Unable to access the 'lazy' property because it is undefined

I used a helpful guide on the webpack website to incorporate TypeScript into my existing React App. However, upon launching the app, an error message pops up saying: TypeError: Cannot read property 'lazy' of undefined The version of React being ...

Apollo Angular client that consistently relies on caching

I am currently using the Apollo Angular client along with the InMemoryCache. I have some watchQuery's that I want to disable caching for. I have configured my client in the following way: link: httpLink.create({uri}), cache: new InMemoryCache(), ...

Inoperative due to disability

Issue with Disabling Inputs: [disabled] = true [disabled] = "isDisabled" -----ts > ( isDisabled=true) Standard HTML disabler disable also not functioning properly [attr.disabled] = true [attr.disabled] = "isDisabled" -----ts > ( isDisabled=true) ...

Tips for retrieving the generated ID from the server immediately following form submission using the Post method in TypeScript

When submitting a long-form, it is important to ensure that no data is lost. Users should be able to stay on the same page to make any necessary changes after clicking the submit button. I need to receive the unique id generated by the server upon submissi ...

Encountering an issue while upgrading to Angular 10: Unable to interpret "tsconfig.json" as a valid JSON AST Object

I'm currently updating my Angular 9 app to Angular 10 and encountering this error: > Removing "Solution Style" TypeScript configuration file support. × Migration failed: Failed to parse "tsconfig.json" as JSON AST Object. PropertyNameExpected at l ...

Unable to bring in an exported class from a TypeScript file

I have a TypeScript file named foo.ts that contains an exported class called "Foo" export default class Foo{ } I am attempting to import this class into another file within the same directory import {Foo} from './foo'; However, I am encounter ...

The functionality of the Ionic 4 app differs from that of an Electron app

I've encountered an issue with my Ionic 4 capacitor app. While it functions properly on Android studio, I'm having trouble getting it to work on Electron. Any ideas on how to resolve this? Here are the steps I took to convert it to Electron: np ...

What's causing the discrepancy in the parameters?

I have an issue with the following method: import { getCookie } from 'cookies-next'; export const getAccessTokenFromCookies = ( req?: NonNullable<Parameters<typeof getCookie>[1]>['req'], res?: NonNullable<Parameters& ...

Angular Unit Test with SignalR: An issue occurred during the server negotiation process, resulting in a 'Not Found' error

Currently, I am working on an Angular 9 project with Asp.Net Core that utilizes SignalR. While everything is functioning correctly in the application, I am facing a challenge in performing proper unit testing on the component that integrates the signalr se ...

Refreshing user information on Ionic platform

Hello there, I am seeking assistance on updating user data in Angular and Ionic. I have managed to retrieve the user ID from local storage and create a method to store the new user data. However, I'm struggling with updating the user with this new inf ...

`I am encountering an "Invalid" error when checking @angular/[email protected] with the command "npm ls rxjs". What steps should I take to resolve this issue?`

Upon running "npm ls rxjs," the following output is displayed: +-- @angular-devkit/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e6eaf7e0c5bcabb4abb5a8ebe0fdf1abb6">[email protected]</a> | `-- <a href="/cdn- ...

When downloading text using Angular, the file may not display new line characters correctly when opened in Notepad

When downloading text data as a .txt file in my Angular application using JavaScript code, I encountered an issue. Below is the code snippet: function download_text_as_file(data: string) { var element = document.createElement('a') eleme ...

Encountered an error while trying to install Drivelist: Module 'C:Program Files odejs ode_modules pm ode_modules ode-gypin' not found

My electron project relies on the drivelist dependency. However, when I attempt to run "npm install," I encounter an error indicating that the node-gyp\bin folder is missing. Surprisingly, I do have the node-gyp\bin in my node modules and even in ...

No matter which port I try to use, I always receive the error message "listen EADDRINUSE: address already in use :::1000"

Encountered an error: EADDRINUSE - address already in use at port 1000. The issue is within the Server setupListenHandle and listenInCluster functions in the node.js file. I am currently running this on a Mac operating system, specifically Sonoma. Despit ...

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

Can the script be loaded into a TypeScript file?

I'm currently in the process of integrating this script tag into my Angular 2 project, but I'm searching for a way to incorporate it into the typescript file so that I can access its methods within the .ts file. <script type="text/javascript" ...

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

Issue with locating assets in Angular 6 build

Hey there! I'm currently facing an issue while trying to build my angular project. In the project, I am using scss with assets, and below is a snippet of how I have defined the background image: .ciao { background-image: url("../../assets/images/bc ...

The request body doesn't meet the interface requirements, but it does not trigger an error response

I created a specific interface called NewTransactionPayload to ensure that only objects of this type are accepted in the request body. Strangely, TypeScript does not show any errors when I host the application. Why is that? // Sample interfaces interface ...

How can I incorporate TypeScript paths into Storybook with Webpack version 5?

Storybook includes a pre-configured Webpack setup. Up until Webpack v4, it was possible to utilize tsconfig-paths-webpack-plugin and define custom tsconfig (or any other plugin) like so: const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plug ...