Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

Is there a way to call a function with specific parameters when the value of a select element changes in Angular?

<div class="col-sm-6 col-md-4">
  <label class="mobileNumberLabel " for="mobilrNumber">Select Service</label>
  <div class="nice-wrap">
     <select (change)="checkCategory(item.price,item.serviceName,m,k,'add');" class="js-example-basic-single nice-textbox" >
       <optgroup *ngFor="let item of serviceObject;let k = index" label='{{item.categoryName}}'>
          <option *ngFor="let service of item.services;let m = index">
            {{service.serviceName}} -&nbsp;&nbsp;{{item.categoryName}}
          </option>
       </optgroup>
     </select>
   </div>
</div>

I need to pass the price and serviceName of the selected option as parameters to the checkCategory function. Can this be achieved in Angular?

Answer №1

It is important to note that passing values like item, m, k in your code may not work since they are out of scope. In this case, consider passing $event to the handler function and utilizing

event.target.selectedOptions[0].parentElement
to retrieve the selected optGroup element.

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

Numerous HTML documents being uploaded to the server for a multitude of individuals

Currently, I am developing a game on a website where players create new rooms and are assigned specific roles with individual powers. Some players need to wait for input from others, creating a dynamic gameplay experience. Additionally, there are certain ...

Updating two separate <DIV> elements with a single AJAX request

Can two different targeted DIVs be updated simultaneously using a single ajax call? Consider the index.html code snippet below: <script> xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.rea ...

Exploring advanced customization options in Angular 6+: Extending the default configuration beyond the environment settings

I am dealing with multiple Angular configurations and I'm trying to customize the default settings by using lodash merge: import { merge } from 'lodash' import { defaults } from './defaults' export const customConfig = merge(defa ...

An error of type TypeError occurred while attempting to browserify a module in a Node.js environment

Is there a way to integrate this algorithm into a client-side function? I'm looking to use the RAKE Module within a browserified function on the client side. You can find the RAKE Module on GitHub here: https://github.com/waseem18/node-rake To compi ...

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

No routes found to match. URL Segment: ''. This issue occurs when attempting to utilize child routes with Angular 2

I am having issues with this specific plunker that seems to not be working correctly. To try and fix the problem, I attempted to comment out a section of code... RouterModule.forRoot([ { path: "", component: TestComponent, ...

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

What is the best way to ensure a specific row remains at the bottom of an Angular table with Material when sorting?

My data table contains a list of items with a row at the end showing the totals. | name | value1 | value2 | --------------------------- | Emily | 3 | 5 | | Finn | 4 | 6 | | Grace | 1 | 3 | | TOTAL | 8 | 14 | I&apos ...

Convert a Node.js module from synchronous to asynchronous functionality

I recently developed a Node.js module that is designed to handle Handlebars templates. It reads a directory of these templates, compiles them, and then exports an object containing the templates with their names as keys: 'use strict'; var fs ...

One of the interfaces in use is malfunctioning, despite being identical to the other interface in TypeScript

I have been working on the IDocumentFilingDto.ts file. import { DocumentOrigin } from "./IDocumentFilingDto"; export interface IDocumentFilingDtoGen { UniqueId?: any; Title?: string; DocumentId?: string; Binder?: any; Communi ...

Creating a unique navigation route in React

My application has a consistent layout for all routes except one, which will be completely different from the rest. The entire application will include a menu, body, footer, etc. However, the one-off route should be standalone without these elements. How ...

Having trouble submitting ajax form data through nodemailer

Hey there, Recently, I created a web app using node.js and express. Everything seems to be working fine except for one issue - I am struggling to get the JSON data sent by AJAX into Nodemailer. Despite confirming that my AJAX is successfully sending the ...

Organize items within an array based on dual properties rather than a single one

Here is an array of objects that I would like to group based on certain keys (JSON format): [ { "name": "john", "lastName": "doe", "gender": "male" }, { "name": &qu ...

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

Utilize jQuery to showcase images on your webpage

There seems to be an issue with image display - sometimes the selected image does not show up until clicked a second time. Using jQuery $('#morefiles').change(function (event) { if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test($(this).val())) { ...

Is it possible to define a state within a map function?

This section of my code retrieves JSON data from the backend API and displays it as a list. Here is an example of my JSON data: (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {id: 1, t ...

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

Encountering a problem with Firebase file uploading when using the "express-fileupload" library

Attempting to upload files using "firebase-admin" in combination with "express-fileupload". All Firebase and express-fileupload configurations have been properly set up: My required libraries: const firebaseAdmin = require("fireba ...

Running the npm install command will eliminate any external JS or CSS files that are being

For my project, I incorporated jquery-datatimepicker by including jquery.datetimepicker.min.css and jquery.datetimepicker.full.min.js in angular.json and placed them within the node_modules/datetimepick directory. Here is a snippet of my angular.json conf ...