Update ngModel value following the PUT request response

I currently have a variable named dummy_value and I would like to update it using an input box.

<p>{{dummy_value}}</p>
<input [(ngModel)]="dummy_value" />

Upon making this change, the dummy_value updates instantly due to the two-way binding. However, I am looking for a way to update it after receiving a response from an API without having to create an additional variable.

public modifyInput() {
   this.my_service.updateInput(this.dummy_value)
      .then(response => {
        // add modifications here.
      }
}

Is there a possible solution for accomplishing this task? Your help is greatly appreciated.

angulartypescript

Answer №1

Make a modification to the code by eliminating the two-way data binding and utilizing the @ViewChild decorator:

<p>{{new_value}}</p>
<input #myname [ngModel]="new_value" />

@ViewChild('myname') input: ElementRef;
public updateInput() {
   this.my_service.updateInput(this.new_value)
      .then(response => {
        this.new_value = this.input.nativeElement.value;
      }
}

View Demo

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

Consolidate multiple sorting functions into a single function to effectively sort by column

Can someone help me simplify my sorting function for array columns? Currently, I have multiple functions like the one below for each column: sort() { if (this.sortAsc == false) { this.tab.sort((a, b) => { return a.name.localeCompare( ...

angulartypescriptsortingoptimization

Incorporating an additional ion-item alongside the existing one instead of substituting it

I am retrieving a list of questions from an API with pagination. I have a button that triggers a function to load the next page of questions. Instead of replacing the previous page, I want to append the new questions below the existing ones. Here is my cur ...

angulartypescriptionic-framework

Using TypeScript's `async await` within a nested function invocation

I am having trouble extracting the 'assigned suspect' from the callbacks, as it is showing up as undefined. Strangely, it works fine within an if statement. I believe the issue is related to the await/async functionality. Any assistance would be ...

typescript

What is the process for inserting a new element into an Array-type Observable?

I've been working on the Angular Tour of Heroes example and I have a feature where users can add new heroes to the existing list. Here's my add hero method in hero.service.ts: addNewHero(hero : Hero) : Observable<Hero> { console.log(her ...

arraysangularrxjs-observables

Having Trouble Displaying Material UI Icons in Your React App? Here's Why: "Invalid Objects as React Children"

I have been working on a basic app that showcases information about a patient. In this specific component, I am only displaying the name, occupation, and a symbol from Material UI to indicate whether the patient is male or female. However, when I attempt ...

reactjstypescriptmaterial-ui

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

javascripthtmlangularangular-ng-if

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5

Building a MEAN stack application using Angular 5 and implementing passportJS for authentication

What's the process for implementing authentication in a MEAN stack using Angular 5, Node.js, and Passport.js? ...

node.jsangularpassport.jsmean-stack

Angular | Boosting performance with asset chunking

This particular inquiry mirrors 92% chunk asset optimization - webpack. However, a satisfactory solution has yet to be found. Typically, I utilize ng serve or nmp start to initiate my service locally and it functions correctly. However, on an EC2 instance ...

node.jsangularnpmwebpacknpm-update

How to upgrade Angular Header/Http/RequestOptions from deprecated in Angular 6.0 to Angular 8.0?

When working on http requests in Angular 6.0, I typically follow this block of code. I attempted to incorporate the newer features introduced in Angular 8.0 such as HttpClient, HttpResponse, and HttpHeaders. However, I found that the syntax did not align ...

angulartypescripthttp

How can I assign a type to an array object by utilizing both the 'Pick' and '&' keywords simultaneously in TypeScript?

As a beginner in TypeScript, I am looking to declare a type for an array object similar to the example below. const temp = [{ id: 0, // number follower_id: 0, // number followee_id: 0, // number created_at: '', // string delete_at: &ap ...

typescripttypeerror

The server is currently active on port 80, but unfortunately cannot be accessed using the domain

I've successfully configured my Angular5 server to run, but I'm facing an issue. When I start it on port 80, I am unable to access it using [domain].de or ; only seems to work. Why is this happening? To initiate the server, I use the following ...

node.jsangularubuntunpmserver

Developing a Generic API Invocation Function

I'm currently working on a function that has the capability to call multiple APIs while providing strong typing for each parameter: api - which represents the name of the API, route - the specific route within the 'api', and params - a JSON ...

javascripttypescriptgenerics

Selecting a GoJS Node using keys

In Angular with TypeScript, what is the best way to select a node from a diagram based on its key? Currently, I am required to left-click a newly created node in order to select it, but I would like for it to be automatically selected upon creation. I ha ...

angulartypescriptgojs

Anticipating outcome in NgRx Effects

Incorporating ngrx-effects into my project has been successful for retrieving data: component dispatches action -> effect triggers http service call -> data is returned from http service -> effect sends data to store through action -> component ...

angularngrxngrx-effects

Error message is not shown by React Material UI OutlinedInput

Using React and material UI to show an outlined input. I can successfully display an error by setting the error prop to true, but I encountered a problem when trying to include a message using the helperText prop: <OutlinedInput margin="dense&quo ...

javascriptreactjstypescriptmaterial-ui

How to customize toggle icon in Angular Material mat-slide-toggle

I'm currently using Angular6 to design my user interface. The default style of the mat-slide-toggle button is shown below: https://i.stack.imgur.com/tIqus.png However, I would like the toggle button to have the appearance of the material-icons togg ...

angularangular-materialgoogle-material-icons

An exploration of effortlessly moving elements using webdriver.io - the power of

I have been attempting to utilize the drag and drop method in WebDriver.io, but I am encountering issues. I followed the example for drag & drop on this website: https://www.w3schools.com/html/html5_draganddrop.asp. This functionality is essential for ...

javascripttypescriptselenium-webdriverselenium-chromedriverwdio-v5

How can one effectively import and save data from a CSV file into an array comprised of objects?

I am looking to read a CSV file and store it in a variable for future access, preferably as an array of objects. However, when trying the following code snippet: const csv = fs .createReadStream('data.csv') .pipe(csv.default({ separator: &ap ...

node.jstypescriptpromisenestjs

What steps can I take to allow a third-party JavaScript to access my TypeScript object?

I am working on an Angular application and I have a requirement to develop an API for a third-party JavaScript that will be injected dynamically. public class MyApi{ public callSomeFunction():void{...} public getSomeValue():any {...} } var publicA ...

javascriptangulartypescriptapi-design