Pass the parameter name to the controller using the Change function in Angular 2

Question

Pass the parameter name to the controller using the Change function in Angular 2

When creating a string from multiple inputs, I have a requirement to include the name of the input element as the second parameter in a function.

<input [(ngModel)]="programSearched" name="programSearched"(ngModelChange)="stringBuilderOnChangeMaker(programSearched,??programSearched.name??)" </input>

I need to distinguish between different inputs triggering the same onchange action, hence passing the name of the calling input to my method is essential.

stringBuilderOnChangeMaker(value, type) {
    if (type == X) {
    ...
    } else if (type == Y) {
    ...
    }
}

One option is to send a generic value like "program" or 1 as the second parameter, but it would be more elegant and informative to pass the id or name of the element instead.

angular typescript

Answer 1

Answer №1

If you want to access the changed object, you can include the $event parameter in your change method. This will allow you to retrieve the updated object. For example, if your object has a 'name' field, your code would be structured like this:

html

(ngModelChange)="stringBuilderOnChageMaker(programSearched, $event)"

ts

stringBuilderOnChageMaker(value, event) {
    console.log(event); // see what is logged
    const name = event.name;

    if (name == X) {
    ...
    } else if (name == Y) {
    ...
    }
}

Answer 2

If you want to access the changed object, you can include the $event parameter in your change method. This will allow you to retrieve the updated object. For example, if your object has a 'name' field, your code would be structured like this:

html

(ngModelChange)="stringBuilderOnChageMaker(programSearched, $event)"

ts

stringBuilderOnChageMaker(value, event) {
    console.log(event); // see what is logged
    const name = event.name;

    if (name == X) {
    ...
    } else if (name == Y) {
    ...
    }
}

Answer 3

Answer №2

It may have been a while, but I recently encountered the same issue and found a solution. Here's how I fixed it:

Here's the HTML code snippet:

(change)="saveChange(product, $event)"

And here's the TypeScript code:

public saveChange(product, event) {

    const name = event.currentTarget.name;
    //..
}

This was tested on Angular version 7.0.6.

Answer 4

It may have been a while, but I recently encountered the same issue and found a solution. Here's how I fixed it:

Here's the HTML code snippet:

(change)="saveChange(product, $event)"

And here's the TypeScript code:

public saveChange(product, event) {

    const name = event.currentTarget.name;
    //..
}

This was tested on Angular version 7.0.6.

Pass the parameter name to the controller using the Change function in Angular 2

Answer №1

Answer №2

Similar questions

Incorporating an Angular 2 Directive within the body tag of an

Exploring TypeScript: Navigating the static methods within a generic class

Retrieve an instance of the property class within a property decorator

What is the definition of reusable components within the context of Angular, React, and Vue?

The customer's status cannot be determined

Retrieve a specific value from the NGXS state by providing a parameter

Error: Angular router outlet could not find any matching routes for the requested

Is there a way to merge TypeScript code with C++ during compilation?

When attempting to access Firebase Storage with Angular, you may encounter the error message: "TypeError: app.storage

Changing the target in tsconfig.json to "es2022" leads to the error message "Property 'xx' is referenced before its initialization.ts(2729)"

In the Angular Google Maps API, is it possible to update the attributes of <agm-marker> directly within the TypeScript code?

Creating a universal timer at the application level in Angular

Unable to set up enzyme adapter

Getting a string output from a Typescript promise

Looking for a shortcut in VSCode to quickly insert imports into existing import statements or easily add imports as needed on the go?

Issue with displaying international characters when using HttpClient's http.get() function in Angular.The

What could be causing my TypeScript project to only fail in VScode?

How can I redirect a remote image URL to a local folder during development?

Why is it that the Jasmine test is unsuccessful even though the 'expected' and 'toBe' strings appear to be identical?

Jest tests are failing to render React IonDateTime component