Modify a field's value based on a change in another field's value

Imagine a scenario where you have two fields defined within a class:

export class SomeClass {
    selectedObjects: MyClass[];
    fieldToUpdateWhenArrayAboveChange:string;
}

Given the example above, the goal is to automatically update the second field with a comma-separated list of values from the first field (the array).

The 'selectedObjects' field is connected to the UI via 'ngModel'.

Is there a way to execute custom code when a field changes in Angular 2? In C# classes, this can be easily achieved using setters.

angulartypescript

Answer №1

After exploring various options in TypeScript, I eventually found a solution using Angular 2 event binding. By adding 'ngModelChange' to the input field bound to the array, I was able to trigger a method whenever the array was modified. This method allowed me to parse the array as needed and update other TypeScript fields accordingly.

(ngModelChange)='updateTitleAndDescription()'

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

Angular Image Cropping: A How-To Guide

I have been on the lookout for an Angular plugin that allows me to crop images before uploading them to the database. Despite spending all day searching, I have not been able to find a suitable plugin that meets my requirements. What I need specifically i ...

angular

Upload picture to Amazon S3

I am currently working on a project that involves saving images and form data in AWS. I have successfully saved Angular form data in DynamoDB using API gateway and lambda functions. However, I am facing a challenge when it comes to saving images and storin ...

angularamazon-s3lambdaaws-lambda

Tips for troubleshooting a TypeScript create-react-app in Visual Studio Code

Instructions to replicate the issue: Place a breakpoint in any .tsx file execute my npm script "start": "react-scripts start", commence debugging with F5 or by choosing a configuration from the Run and Debug window in vscode. ...

typescriptvisual-studio-codewebpackcreate-react-app

Experiencing issues when deploying an Angular application on Heroku and when trying to run ng serve?

Encountering the error message "The serve command requires to be run in an Angular project, but a project definition could not be found." Here is the content of my package.json file. { "name": "demo-deploy", "version": "0.0.0", "license": "MIT", "scripts ...

angularheroku

Identifying the specific type within a union of types using a discriminator

How can I specify the correct typing for the action argument in the function withoutSwitchReducer as shown below? enum ActionTypesEnum { FOO = 'FOO', BAR = 'BAR', } type ActionTypes = { type: ActionTypesEnum.FOO, paylo ...

typescripttypescript2.0typescript3.0

Exploring the use of @HostListener in Angular for handling drop events

I am currently working on developing a directive for drag and drop functionality with files. I have successfully implemented the dragenter and dragleave events, but for some reason, the drop event is not being recognized. @HostListener('drop', [ ...

javascriptangulardrop

Encountering a 401 Error while trying to host an Angular app on Google Cloud Storage

I am currently facing an issue with deploying my Angular app to a Google Cloud Storage bucket. The bucket is public and set up to be served as a custom website via CNAME (test.example.com). The main page and 404 handler are mapped to index.html, but I am e ...

javascriptangulargoogle-cloud-storage

Is Angular equipped with named routes or states similar to UIRouter?

When working with AngularJS and ui-router, we define a state like this: .state('myState', { url: 'some-user-friendly-url' ... }) This allows us to easily specify the URL and name of the state. It simplifies navigation by letting ...

angularurlangular-ui-router

How do I retrieve a specific svg element in Angular among multiple elements?

I recently delved into learning Angular for a new project. One of my main objectives was finding a way to dynamically alter the styles of SVG elements. This led me to utilizing ViewChild and ElementRef. Here is an example from the HTML: <svg><g ...

angulartypescriptsvg

Navigating through documents in Jhipster (Angular + Springboot)

After successfully developing a controller and service in the backend using Spring, I have managed to implement file upload functionality on the server. To determine the upload location, I utilized System.getProperty("user.dir") to retrieve the current pr ...

javaangularspring-bootspring-mvcjhipster

Adjusting the audio length in React/Typescript: A simple guide

I'm currently developing a web app with React and TypeScript. One of the components I created is called SoundEffect, which plays an mp3 file based on the type of sound passed as a prop. interface ISoundEffectProps { soundType: string, // durat ...

reactjstypescriptaudiomp3html5-audio

Combine the selected values of two dropdowns and display the result in an input field using Angular

I am working on a component that consists of 2 dropdowns. Below is the HTML code snippet for this component: <div class="form-group"> <label>{{l("RoomType")}}</label> <p-dropdown [disabled] = "!roomTypes.length" [options]= ...

javascriptangulartypescriptprimeng

Adding a custom property to a React component

Currently, I am facing an issue while attempting to modify an MUI component. Everything works smoothly until I execute the build command, at which point it fails. I have experimented with a few variations of this, but essentially I am looking to introduce ...

javascriptreactjstypescriptmaterial-uireact-proptypes

Displaying inner arrays in an Angular2 MatTable

Welcome to my initial post on Stack Overflow, where I hope to communicate my query clearly. I am currently attempting to develop a table with dynamic columns. However, I am encountering difficulty in comprehending how to bind matColumnDef to a specific el ...

htmlangulartypescripthtml-tableangular-material

Angular2 - adding the authentication token to request headers

Within my Angular 2 application, I am faced with the task of authenticating every request by including a token in the header. A service has been set up to handle the creation of request headers and insertion of the token. The dilemma arises from the fact t ...

angulartypescript

Approach continuously activates database

The LanguageService class is injected into my components in order to retrieve translations for the component. When a key is not found in the Map, it fetches translations from the server and stores them in a Map. If the key is already in the Map, it retrie ...

angulardictionaryrxjsangular-services

Angular 5 - capturing form inputs - activating event upon selecting suggested values

When I click on suggested values below the input field, the (click)="doSomething()" event doesn't fire. How do I handle this issue? I would like to be able to type something in the input field and then have an event triggered when clicking on the su ...

angularformstypescriptinputevent-handling

Run a single feature file in Protractor by utilizing a specific tag

Is it possible to run just one feature file in Protractor? I am aware that I can specify the file in protractor.conf.js, but I have come across a different solution involving the use of a tag: To single out a specific feature file, you would include a tag ...

angularprotractorcucumberjs

Combining two elements in Angular 2

I am looking to find the intersection of two objects. My goal is to compare these objects and if they have matching values on corresponding keys, then I want to add them to a new object. obj1 = { "Projects": [ "test" ], "Companies": [ "facebook", "google ...

javascriptangulartypescript

Set an array to a JSON object as a fresh entity

My challenge involves working with an array that contains certain values. let myArray = [value1, value2]; I am looking to generate a JSON object in the format shown below: { "field": "[value1, value2]" } ...

jsonangulartypescript