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

What is the best way to upload a photo taken with the Android camera using FormData in Ionic/Angular?

Currently in the process of developing an Android app that allows users to capture and upload their picture to a PATCH API endpoint with the key 'avatar'. To accomplish this, I am utilizing the Cordova Camera along with the Advanced HTTP plugin ...

androidangularionic-frameworkmultipartform-data

What makes it impossible to use var instead of let in ngFor?

My understanding is that in JavaScript, we typically use var and let for variable declarations. The main difference between the two is that var is scoped to the current function, while let is scoped to the current block. Therefore, theoretically I should b ...

javascriptangularvarlet

Display a single button on hover in Angular 2+ framework

I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want the 'Edit' button to show u ...

javascripthtmlcssangular

Enhancing the design of the Mat Calendar with a stylish border

I've been attempting to put a border around my mat calendar, but I'm having trouble figuring out the specific class that will give me the exact look I want. I need it to be just like this: I tried using the following class: .mat-form-field-flex ...

angularangular-materialangular8angular-material-datetimepicker

"Upon subscribing, the object fails to appear on the screen

Why is the subscription object not displaying? Did I make a mistake? this.service.submitGbtForm(formValue) .subscribe((status) => { let a = status; // a = {submitGbtFrom: 'success'} console.log(a, 'SINGLE ...

javascriptangularobject

How can one store the value of a promise or observable in an external variable?

I have thoroughly researched the .then() method and comprehend its functionality. In my current project, it is successfully providing me with the desired value. async getDay() { try { let ref = this.db.getDay(this.dateFirebase); ref.then(o ...

angularasynchronouspromise

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

Our node environment requires that our JavaScript files undergo Babel processing. Figuring out how to handle this has been manageable. The challenge lies in the fact that we have a mix of file types including .js, .jsx, .ts, and .tsx, which is not subject ...

javascriptnode.jstypescriptbabeljstsc

What is the best way to convert a `readonly string[]` to a regular `string[]`?

My data setup is as follows (I am not declaring it as an enum because it is used in both TypeScript server code and non-TypeScript client code): import { enumType } from 'nexus'; export const TYPE_ENUM = Object.freeze({ H: 'H', S: ...

typescripttype-conversiontype-assertion

Dealing with errors within nested requests while using switchMap with RxJS

I am faced with a situation where I need to make 2 dependent API calls: the getCars call requires the user id obtained from getUser. There is a possibility that a user may not have any cars, resulting in a 404 error from the API. How can I handle this sc ...

angulartypescriptrxjs

looking to restrict the interface to only specific types

Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am inte ...

javascripttypescript

Include a "remember me" feature in the Stripe form

I am currently working on an exciting project using Angular 6. Within my website, I have decided to integrate the Stripe payment system. However, I would like to incorporate a unique and default "remember me" feature offered by Stripe. <div id="card-e ...

javascriptangularstripe-payments

Tips for remembering to reactivate the Protractor Angular synchronization feature

Our test codebase is quite large, with around 10,000 lines of JavaScript code. In certain situations, we find it necessary to disable Protractor-to-Angular synchronization using the following line of code: browser.ignoreSynchronization = true; However, o ...

angularseleniumtestingprotractorstatic-code-analysis

The Material UI Datagrid is failing to display any data

I'm currently facing a challenge that has left me scratching my head. I've implemented Material UI Datagrids, but for some reason, I can't get it to populate with data, and the reason eludes me. Even though the Component profiler shows that ...

reactjstypescriptmaterial-uimobx-react

Steps to create a personalized loading screen using Angular

I am looking to enhance the loading screen for our angular 9 application. Currently, we are utilizing <div [ngClass]="isLoading ? 'loading' : ''> in each component along with the isloading: boolean variable. Whenever an API ...

angulartypescript

Error: Module not found - Issue with importing SVG files in NextJS

Currently, I am utilizing the babel plugin inline-react-svg to import inline SVGs in NextJS. Here is a snippet from my .babelrc configuration file: { "presets": ["next/babel"], "plugins": [ "inline-react-svg" ...

reactjstypescriptfrontendnext.jsbabeljs

ridiculing callback within parameter

I have a model setup in the following way: export class MyClass { grpcClient: MyGRPCClient; constructor(config: MyGRPCClientConfig) { this.grpcClient = new MyGRPCClient( config.serverUrl, grpc.credentials.createInsecure(), ); ...

javascripttypescriptjestjs

Redux-toolkit payload does not recognize the specified type

While working on my project, I encountered an issue when using redux-toolkit. I have created the following reducer: setWaypointToEdit: (state, action: PayloadAction<WaypointToEditPayload>) => { let gridPolygonsData: GridPolygonsData; const { ...

reactjstypescriptreduxredux-toolkit

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

Currently, I've been working on a music bot using discord.js. To handle audio streaming, I'm utilizing @discordjs/opus and ytdl-core-discord. Everything runs smoothly when testing the bot locally on my machine - songs from YouTube are played with ...

javascripttypescriptdiscord.js

Managing time in an Angular application using Typescript

I am facing an issue with formatting the time obtained from an API in my FormArray. The time is received in the format: 14.21.00 My goal is to convert this time to the following format: 2:21 PM I have attempted to format it using Angular's DatePip ...

javascriptangulartypescripttimedate-pipe

Issue found in VS2015 with the sequence of AngularJS TypeScript ts files within the appBundle.js file

I've been diving into AngularJS and TypeScript with the VS2015 RC Cordova TypeScript project. Recently, I created a "MyController.ts" file in the same folder as "index.ts". The code worked perfectly fine: module MyTestApp{ export class MyContro ...

angularjscordovatypescriptvisual-studio-2015