Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made:

drop-down-cell-renderer.component.ts

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

@Component({
  selector: 'app-drop-down-cell-renderer',
  templateUrl: './drop-down-cell-renderer.component.html',
  styleUrls: ['./drop-down-cell-renderer.component.css']
})
export class DropDownCellRendererComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
 params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public RefreshRisqueBrutColumn() {
    console.log('LISTENER WORKS')
  }
}

drop-down-cell-renderer.component.html

<select class="form-control"  (change)=" RefreshRisqueBrutColumn();">
    <br>
    <option>1- Très improbable</option>
    <option>2- Peu probable</option>
    <option>3- Possible</option>
    <option>4- Probable</option>
</select>

https://i.sstatic.net/FYyZZ.png My objective is to: Capture and log the selected option number in a form-control using the change listener.
For example:
If user chooses option 0: Console will print: 0
If user picks option 1: Console will print: 1
And so on. Is there a way to do this without extra TypeScript code? Thank you!

Answer №1

When calling your function, you can include $event and access its value using $event.target.value like this:

UpdateRiskColumn($event);

public UpdateRiskColumn(event) {
    console.log('EVENT LISTENER SUCCESS', event.target.value)
  }

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

The Jquery image on.load event seems to only function properly after performing a manual hard refresh of

Looking for a solution to replace loading text with a button only after the image has loaded onto the page. Utilizing on.load as follows: $('img.house').on('load', function() { $('.loading').hide(); $('# ...

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

Compatibility issues with jQuery observed in Firefox and Internet Explorer 11

Check out the code here: jsfiddle demo HTML CODE: <div class="first"> <!-- Part one --> <div class="acord_col"> <div class="img_class" id="exist_site"></div> <div class="intro_text"> </div> </div&g ...

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

What is the best way to eliminate unwanted white space at the top of the page?

I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...

Problem with making sequential requests in Angular using RxJS

I am in need of assistance with the following functions; public userLogin(username: string, password: string) { return this.http.post<any>(`${this.apiURL}/login `, {username, password}, constants.httpOptions) .pipe( map((response) ...

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

Exploring the capabilities of Ionic 3 when integrated with storage

In my Ionic 3 application, I am utilizing the storage feature. To start with, I import storage in the app.module.ts file. import { IonicStorageModule } from '@ionic/storage'; imports: [ IonicStorageModule.forRoot() ] I have developed an Ecomm ...

Angular Material: div not being filled by layout-fill

<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here ...

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

Utilizing jQuery to Toggle Visibility of Table Rows on Button Click

I have a unique layout on my page where there are two tables positioned side by side. The table on the left consists of buttons with company names, and the table on the right should display employees associated with each specific company. Upon initially l ...

How can I convert a PHP class into inline CSS styles?

While exploring MailChimp's css inliner at , I found myself curious if there are any available classes that can achieve the same result. It would be convenient to have this functionality directly in my email code without relying on MailChimp. I am es ...

The modal stubbornly refuses to close

The main component responsible for initiating the process is /new-order. Upon clicking on the confirm button, a modal window appears. <div class="col-12"> <button type="button" class="btn btn-primary m-1" (click)=& ...

Show specific elements on the navbar in Angular 2 based on user login status

Currently, I am working on my initial project in Angular 2 which involves user authentication and its related features. The process has been smooth and the documentation/examples have proved to be very helpful thus far. My current focus is on incorporatin ...

Automatic Submission based on Checkbox Selection

Creating a user-friendly interface for project admins is my goal, but I am encountering difficulties in displaying all tasks. The data is retrieved from the database and put into a table, with each task having a status represented by a binary value - 1 f ...

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

Steps for implementing a conditional statement to handle an empty string in HTML

I need to figure out how to display a different message if my string is empty. Can anyone help me with this? <div class="padding" id="dealBorder"> <pre id="informationDealText"><pan class="inner-pre" style="font-size: 24px; color: whi ...

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...