How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

Question

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

I'm working on Front end Code

  <ng-select formControlName="constituencyId" placeholder="Select Constituency" (change)='onContituencyChanged($event)'>                    >
                                      <ng-option *ngFor="let op of this.getAllConsituencies"  
                                      [value]="op.id"
                                      [attr.typename]="op.constituencyTypeName" > 
                                      {{op.code}} {{op.name}}                              
                                    </ng-option>
                                    </ng-select>

                                    <label>Constituency Name</label>

Now, let's see the Backend code

onContituencyChanged(evt: any) {
 
    console.log("targeted obj of constituency. " ,evt);
}

Currently, I am only extracting the value of the selected item instead of the complete targeted event.

My goal is to implement two operations with ng-select dropdown list in Angular - firstly, upon change, I wish to access the custom attribute added to the dropdown for some specific logic execution.

javascript asp.net angular typescript angular-ngselect

Answer 1

Answer №1

Give this a try:

For TypeScript, do the following:

myCustomSelect: CustomSelectComponent;


  @ViewChild(CustomSelectComponent) private set customSelect(
    customSelect: CustomSelectComponent
  ) {
    if (!customSelect) {
      return;
    }
    this.myCustomSelect = customSelect;
  }

Next, in your change event handler:

onSelectionChanged(event: any) {
if (event) {
      console.log('on selectionChange', this.myCustomSelect.filterInput.nativeElement); //this accesses the attributes of the selected element.
    }
}

Answer 2

Give this a try:

For TypeScript, do the following:

myCustomSelect: CustomSelectComponent;


  @ViewChild(CustomSelectComponent) private set customSelect(
    customSelect: CustomSelectComponent
  ) {
    if (!customSelect) {
      return;
    }
    this.myCustomSelect = customSelect;
  }

Next, in your change event handler:

onSelectionChanged(event: any) {
if (event) {
      console.log('on selectionChange', this.myCustomSelect.filterInput.nativeElement); //this accesses the attributes of the selected element.
    }
}

How can I successfully transmit the entire event during the (change) event binding with ng-select in Angular 14?

Answer №1

Similar questions

Error: string literal left incomplete with spaces only

Tips for addressing style issues within innerText

Ways to make a chosen row stand out in an *ngFor loop?

Guide on creating multiple instances of vue-multiselect with a simple button click

Identifying differences in a Knockout view model

Angular 2 - Creating Your Own Validation Rules

What could be causing the decrease in speed of my Three.js animation within Vue.js?

Using Formik: When the initial value is changed, the props.value will be updated

Combine multiple arrays of JSON objects into a single array while ensuring no duplicates

Experiencing a lack of information in express?

validating if Object may be either 'null' or 'undefined'

Angular 2 Element Selection: Dealing with Unrendered Elements

Enhancing Vue functionality with vue-class-component and Mixins

Combine bar and stacked bar charts on a single graph with morris.js

Retrieve information from a form in AngularJS without relying on two-way data binding

The appendComponentToBody function seems to be malfunctioning within Angular 2

Automatically rehydrate an instance using Angular and JavaScript

Tips for implementing events with AngularJS Bootstrap Colorpicker

Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

Leverage the `dispatch` hook within a useEffect function