Retrieve data from submit button in Angular and use it as a parameter to invoke a function

Question

Retrieve data from submit button in Angular and use it as a parameter to invoke a function

I am working on a HTML file that includes a dropdown list:

    <select>
      <option *ngFor="let t of items" value="t">
          {{ t }}
        </option>
    </select>

In addition to the dropdown list, there is also a submit button present on the same page:

<button type="button" (click)="selectedValue()" class="btn btn-info btn-sm">
  Submit
</button>

My goal is to retrieve the value that the user selects from the dropdown list. I believe this value is stored in variable "t", and I want to pass it to a function like this:

 selectedValue() {
    // calling the updateValue function with the selected value 
updateValue(t) { }
    
    
      }

This process seems a bit complex to me. I am not sure where to start - how do I transfer the selected value from the HTML to the TypeScript file and then successfully call a function to update the value and receive a successful response (status code: 200) from an HTTP request.

angular typescript

Answer 1

Answer №1

Utilize ngModel for bidirectional data binding.

To set the value for each option, you can either use the [value] directive or value="{{ t }}". Currently, every option is holding the value with the string "t," which is incorrect.

<select [(ngModel)]='selectedOption'>
  <option *ngFor="let t of items" [value]="t">
      {{ t }}
    </option>
</select>

selectedOption: string;

selectedValue() {
  this.updateValue(this.selectedOption);
}

updateValue(t) { 
  console.log(t);
}

Check out a Sample StackBlitz Demo

Answer 2

Utilize ngModel for bidirectional data binding.

To set the value for each option, you can either use the [value] directive or value="{{ t }}". Currently, every option is holding the value with the string "t," which is incorrect.

<select [(ngModel)]='selectedOption'>
  <option *ngFor="let t of items" [value]="t">
      {{ t }}
    </option>
</select>

selectedOption: string;

selectedValue() {
  this.updateValue(this.selectedOption);
}

updateValue(t) { 
  console.log(t);
}

Check out a Sample StackBlitz Demo

Retrieve data from submit button in Angular and use it as a parameter to invoke a function

Answer №1

Similar questions

The attribute 'close' is not present in the 'Application' data type

Guide on changing the color of the selected item in mat-nav-list within angular 6

receiving a null value in the JSON response

Mastering the art of theming components using styled-components and Material-UI

Angular component.html does not compile due to a check that includes inline array creation

When using setInterval, the image remains static on Safari but updates on Chrome

An Angular CDK overlay conflict occurring within a nested component

Is there a way for one function to access the validation of a nullable field performed by another function?

Customizable mongoDB database collection

Failure during building Angular 13 library with Ivy partial compilation mode

What is the process for bringing my API function into a different Typescript file?

Managing Autocomplete Functionality in React with Material-UI, Both with and without a Pre

Facing Issue with Angular Firestore Authentication (getting null value for credentials)

Adding additional properties to Material UI shadows in Typescript is a simple process that can enhance the visual

tsc is not recognizing the configurations in my tsconfig.json file

Adding jQuery and other libraries to Typescript for optimal functionality

Navigating to the next or previous item in an Angular2 Firebase collection based on the current key

During the build process, NextJS encountered an issue locating the constants.js module

Navigating to the main directory in Angular 2

Angular: Incorporating a custom validation function into the controller - Techniques for accessing the 'this' keyword