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

Discrepancy in Angular Material Buttons with theme design

Tips for patiently anticipating the completed response within an interceptor

define a variable within a v-for loop

Never display mat-select panel when closed

Finding it challenging to adapt an AngularJs component-based modal to TypeScript

Updating the model does not reflect changes made to AGM polygons' binding

Tips on extracting value from a pending promise in a mongoose model when using model.findOne()

Having trouble accessing child directives in Angular 2 using @ContentChildren

One or multiple web browsers set in the Browserslist of the project

Mapping JSON data from an array with multiple properties

Avoiding Maximum Call Stack Size Exceeded in Observables: Tips and Tricks

What could be causing a blank page to appear after being redirected? (Using NextJS 13 API Route)

Why won't Angular 4 create the node_modules folder when using ng new to initialize a new project?

A step-by-step guide for updating a minor version of Angular with Angular CLI

Angular failing to detect Leaflet TimeDimension

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

Reordering items in Angular2 ngFor without having to recreate them

What is the best way to wrap `useFetch` in order to leverage reactivity?

"An issue has been noticed with Discord.js and Discordx VoiceStateUpdate where the return

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?