Determining the name of the currently focused DOM element in Angular2

How can I detect the name of a selected element from a group of select elements on a page?

For example:

<select (click)="functionDetectName()" name="test1">
<select (click)="functionDetectName()" name="test2">
<select (click)="functionDetectName()" name="test3">

functionDetectName() {
console.log("Is there a way to determine the name of the selected select element?");
}

When clicking on the test1 select box, the console should output: test1. Similarly, for test2 and test3.

Answer №1

If you pass the $event parameter to your functionFindName() function, you can then extract the attribute name from the data that is passed. Here's an example:

<select (click)="functionFindName($event)" name="example1">
<select (click)="functionFindName($event)" name="example2">
<select (click)="functionFindName($event)" name="example3">

functionFindName(event: MouseEvent) {
    console.log(event.srcElement.name);
}

Answer №2

To easily pass the name, simply use:

<select (click)="functionGetName('example')" name="example">

But if you insist on using the attribute, you can try this method:

<select #id (click)="functionGetName(id.getAttribute('name'))" name="example">

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

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

Where can the npm script find the files in package.json for angular 2.x?

Currently working in a Windows 7 environment using Chrome with Angular 2.4 (without Visual Studio), I successfully downloaded the quickstart. Now, I need to determine the version of 'node' that I am utilizing, so I input node -v in the command p ...

Invoking a functionality within a stream of events through an observable's subscribe

Service2.ts public flags$: BehaviorSubject<FlagName> = new BehaviorSubject<FlagName>("custom-flag-1"); This flag is set up as follows: private _setFlags = () => { const flagsData = this._customClient.getFlags(); if (f ...

Using Visual Studio Code Build Tasks in Harmony

The documentation for Visual Studio Code includes examples of tasks.json configurations that allow for either typescript compilation or markdown compilation, but does not provide clear instructions on how to achieve both simultaneously. Is there a way to ...

filtering an array based on a specific property will result in the original array remaining

Working on filtering an array of objects based on a certain property using the following code snippet: if (payment == Payment.CREDIT_CARD) { this.currenies.filter((currency: Currency) => currency.isFromEurope === true); console.log(this.currencies) ...

How do Angular and NestJS manage to dynamically resolve injection tokens during runtime using the TypeScript type hints provided at compile time?

Frameworks such as Angular and NestJS in TypeScript utilize dependency injection by converting TypeScript type hints into injection tokens. These tokens are then used to fetch dependencies and inject them into constructors at runtime: @Injectable() // < ...

"Learn how to trigger an event from a component loop up to the main parent in Angular 5

I have created the following code to loop through components and display their children: parent.component.ts tree = [ { id: 1, name: 'test 1' }, { id: 2, name: 'test 2', children: [ { ...

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

Using the `forwardRef` type in TypeScript with JSX dot notation

Currently, I am exploring the different types for Dot Notation components using forwardRef. I came across an example that showcases how dot notation is used without forwardRef: https://codesandbox.io/s/stpkm This example perfectly captures what I want to ...

Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

I am working on a simple form with checkboxes and I need to send only the checked boxes to TypeScript. However, when I attempt to save the data by clicking the save button, I encounter an error message {test: undefined} Below is the form layout: <ion-c ...

Developing with Ionic 2 allows you to efficiently run a background service using Cordova

I am currently using Ionic 2 and I have a requirement for my app to perform certain tasks even when it is closed, similar to how Gmail continues to provide notifications all the time. After some research, I came across this documentation: https://ionicfr ...

Guiding you through the process of dynamically defining a port in proxy.conf.json or proxy.conf.js

Starting my Angular4 application for development involves running npm run start, where start is defined as "start": "ng serve --proxy=proxy.conf.json". Within the proxy.conf.json file, I have: { "/api/**": { "target": "http://localhost:80 ...

Are there any alternative methods to define a constructor function in TypeScript that do not involve utilizing classes? Upon researching on this subject, it appears that all sources suggest using classes

Is it possible to transform this class declaration into a constructor function without losing TypeScript compatibility? class Animal { constructor(public name: string, public energy: string) {} } ...

Exploring support classes in an Angular application

Within my Angular project, I have not only component classes but also auxiliary classes for data model representation and data iterators. When Angular generates test classes for components, they are named in the format component-name.component.spec.ts I ...

Converting a React Typescript project to Javascript ES5: A step-by-step guide

I have a react typescript project and I need to convert the source code (NOT THE BUILD) to ES3 or ES5 JavaScript. This is because I want to use this code as a component in another React app. Can you suggest which preset and plugins I should use for this t ...

Using Cypress and JWT, automate the login process for JHipster

Is there a way to automate the bypassing of the JHipster login screen? This is my goal: let jwt_token before(function fetchUser() { cy.request('POST', '/api/authenticate', { username: 'user', password: &a ...

The Material-UI TextField is placed in the Header section of the page

As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library. This is my first time creating a header with CSS. Are there any specific cod ...

Utilizing ngClassEven and ngClassOdd in Angular 2 for Improved Styling

I attempted to replicate the behavior of ng-class-even and ng-class-odd (originally from Angular 1) in my Angular 2 application. Below is the code I wrote and it's functioning correctly, but I'm curious if there are alternative methods to achiev ...

Retrieve the key/value pair from a JSON response object using Angular 2 and TypeScript

return this._http.post(apiUrl, model) .map((res: Response) => { console.log(res.json()); let user = res.json(); //let user = Object.keys(res.json()); <-- only gives keys not values ...

Customizing dropzone color while dragging an image in Angular

I have been using Angular and created an image input field. Within this input field, I implemented a dropzone that allows users to drag files into it. Is there a way for me to modify the background of the dropzone when a file is being dragged into it? Thi ...