Obtaining Input Field Value in Angular Using Code

How can I pass input values to a function in order to trigger an alert? Check out the HTML code below:

<div class="container p-5 ">
  <input #titleInput *ngIf="isClicked" type="text" class="col-4"><br>
  <button (click)="OnClick()" class="btn btn-primary col-2 ">
    Show 
  </button>
  <button (click)="Send(titleInput.value)" class="btn btn-success col-2 m-3">
    Send
  </button>
</div>

Additionally, here is the corresponding component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

Send(data: any) {
  alert(data);
}

OnClick() {
  this.isClicked = true;
}
  
title = 'demoproject1';
isClicked = false;
}

I need assistance retrieving the value entered into the input field and passing it to the function within my component.

Answer №1

Declare a variable to hold the input value:
within your component.ts file

...
export class MainComponent {
userInput: string;
...

If not already included, add FormsModule to your module.ts file
module.ts

import { FormsModule } from '@angular/forms';

Implement ngModel in your HTML template:
html:

<input type="text" [(ngModel)]="userInput" ></-input> 

Note: Remember to configure a Route for the component within your app-routing.module.ts

Learn more about ngModel here

Answer №2

@ViewChild('titleInput') titleInput: 
ElementRef;

ngAfterViewInit() {
  // Your unique logic goes here...
}

The code snippet can be found at: https://example.com/code-snippet

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

Delightful Bootstrap Tabs with Dynamic Content via Ajax

My website has a lot of tabs designed with Bootstrap. I wanted to make them responsive, so I tried using a plugin called Bootstrap Tabcollapse from https://github.com/flatlogic/bootstrap-tabcollapse (you can see a demo here: http://tabcollapse.okendoken.co ...

If the item with the specified name is not found in the list, display an image using Vue's v-if directive

<ul class="ulItems" v-for="item in listingItems" :key="item.channels"> <li class="liItems"> {{ item.itemName }} </li> </ul> I am looking to incorporate an image in situations where th ...

Create a list with interconnected input fields for duplication

I'm new to javascript and I have a question. I'm working on duplicating a list that has input fields for each option. The duplication is working fine, but the associated input fields are not showing up in the duplicated list. Additionally, I woul ...

What is the correct way to generate a normal map using THREE.js?

Experimenting with the Normal map Ninja demo, I attempted to apply it to a cube in my scene using the most recent version of Three.js from the development branch: // Setting up common material parameters var ambient = 0x050505, diffuse = 0x331100, specul ...

What to do when encountering the error message: "[WARNING]: Failed to connect to Chrome within the allotted time, attempting

C# .NET Framework 4.8 Console Application(32bit) Edge(Chromium) 80.0.361.69 msedgedriver.exe(64bit, 80.0.316.69) Windows 10 Home 64bit 1909 18363.720 Selenium.WebDriver 4.0.0-alpha05 static void Main() { var edgeOptions = new EdgeOptions { ...

The call stack limit has been exceeded due to the combination of Node, Express, Angular, and Angular-route

Embarking on a new SPA journey, my tech stack includes: Back-end: NodeJS + Express Front-end: Angular + Angular-route. Twitter Bootstrap Underscore Having followed many tutorials with similar stacks, my project files are structured as follows: pac ...

Enhance JSON nesting with knockoutJS

I am currently working on updating a JSON object in memory using the knockout.js user interface. However, I have encountered an issue where changes made in the UI do not seem to reflect on the JSON data itself. To troubleshoot this problem, I have added bu ...

Building on the Vuejs3 and Vuex4 framework, create a conditional rendering feature that triggers upon

I have a unique setup where custom objects are used to hold child objects full of data. The child objects start with null values for all properties, allowing them to be filled with data from remote sources when referenced. This results in a lazy-loading sy ...

Using PHP encryption and decrypting with AES in Angular using Crypto-JS

I have successfully implemented encryption and decryption in PHP using aes-256-cbc. However, I am now facing a challenge in decrypting the same content in Angular 7. Encryption in php using aes-256-cbc by following method $this->data ="plaintext&qu ...

Unable to invoke parent method from child component in Vue causing issue

I am facing an issue where I am trying to trigger a method in the parent component from the child component using $emit, but for some reason, it is not working as expected. Can someone please help me troubleshoot this problem? Parent Component <templat ...

Ways to receive alerts when a marker enters a polygon

Looking for a way to receive notifications if my marker enters any of the polygons on the map. Having trouble implementing it correctly, here is my current code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com ...

Encountering the error "Error: Maximum update depth exceeded" while coding a React private Route with infinite

Attempting to render components inside private routes only if the user is authenticated, but encountering an error message that reads: "Error: Maximum update depth exceeded." This issue typically arises when a component continuously calls setState within c ...

Encountering issues with parsing JSON while transitioning to Google Safeframe ads

Is there a way to cycle through all the iframes in the DOM using Selenium? var frames = driver.FindElements(By.TagName("iframe")); foreach (var frame in frames) { driver.SwitchTo().Frame(frame); //Execute operations and then switch back to ...

Can the optionsText be shown while saving the optionsValue in a dropdown menu?

Here is the code snippet I am currently working with: var model = function() { this.nameSomething = ko.observable(''); this.nameId = ko.observable(0); }; var vm = (function() { var myList = [{ id: 1, type: 'foo1'}, { id: 2, ...

Ways to turn off logging for an Angular application using MSAL

I have integrated the Microsoft Authentication Library msal into my Angular application. However, when I deploy the production version of the app, I notice these logs appearing in the console. What is the best way to turn off this logging? https://i.sstat ...

Encountering a problem with the click handler when trying to log in with Google on

Currently, I am working on integrating social login with Google into my Angular project Below is the relevant HTML code for the login: <button (click)="prepareLoginButton()" #googleSignUp >Login Using Google</button> And here is the ...

Reload the precise URL using JavaScript or jQuery

I need a solution to refresh the current URL after an ajax success. I attempted the following methods: location.reload() history.go(0) location.href = location.href location.href = location.pathname location.replace(location.pathname) However, I encounter ...

Why is it that dependency injection is not functioning properly in my Angular 17 project when I am utilizing esbuild for the build process

I am looking to switch from using "@angular-devkit/build-angular:browser" to "@angular-devkit/build-angular:browser" in order to improve my development speed. However, the issue I am facing is that every time I launch my application, the following error ap ...

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

I found this code snippet that I need help with. <div class="row"> <div class="col-xs-4"> <label class="checkbox-inline"><input type="checkbox" value="draft">Draft</label> </div> <div class="c ...

Is it necessary to test the main.js file in Vue.js project?

While performing unit tests on components is acceptable, after running coverage analysis I have noticed that certain lines of code in the main.js file remain uncovered. This raises the question: should the main.js file also be included in testing? Specifi ...