Angular 2 get element by dynamic id

Question

How can I get/update value of element with dynamic id?

<input type="text" class="form-control" id="{{'lat' + ind}}" formControlName="lat">

I can't use ngAfterViewInit() {} because I need to update dynamic input after server responce

this.someService.getData().subscribe(
                  (response) => {this.data = response.json()
                                 this.lon = this.data.x;
                                 this.lat = this.data.y;
                                 this.ind = this.data.ind;
                                // UPDATE MY 'lat+ind' and 'lon+ind' HERE
                  },
                  (error) => console.log('ERROR: ' + error)
          );

You could use `document.querySelector('#lat' + this.ind)` to retrieve the DOM element — JasonK, Dec 08 '17 at 12:03

JasonK · Answer 1 · 2017-12-08T13:07:11.840

0

There might be a better solution for Angular, but you could use querySelector.

Here's an example:

const input = <HTMLInputElement>document.querySelector('#lat' + this.ind);

input.value = 'value'; // set value

Edit

Please read https://angular.io/guide/forms to understand how forms work with Angular.

edited Dec 08 '17 at 13:07

answered Dec 08 '17 at 12:22

JasonK

5,214
9
33
61

Thanks, but my problem that inputs got new values, but form.data object no: "addresses": [ { "lat": 0, "lon": 0 }, { "lat": 0, "lon": 0 } ] – Serhio g. Lazin Dec 08 '17 at 12:47
@Serhiog.Lazin As far as I can see you're not setting any input value. You're setting the **id**. See my edit. – JasonK Dec 08 '17 at 12:51
Your answer works. New value appeared in inputs, but didn't appear in form.value object. That is a problem – Serhio g. Lazin Dec 08 '17 at 12:54
Forms don't have an attribute called `value`, only inputs do (see https://stackoverflow.com/questions/3547035/javascript-getting-html-form-values). – JasonK Dec 08 '17 at 13:00

Vinod Bhavnani · Answer 2 · 2017-12-08T12:30:06.747

0

this.someService.getData().subscribe(
    (response) => {
                     this.ngZone.run(function() {
                       this.data = response.json()
                       this.lon = this.data.x;
                       this.lat = this.data.y;
                       this.ind = this.data.ind;
                     };)
                  },
(error) => console.log('ERROR: ' + error)
);

Note: you have to import NgZone and inject it at your constructor.

You need to do this because your view is not updated after you receive your response from your service. My code above will revive your view and publish updated values to your ID.

Your template gets published in the beginning when your lat and ind are still undefined. Then when you make your service call and you get a response, you must tell angular to update your view with the new values.

Note: You can also use ChangeDetectorRef.detectChanges() to do this

edited Dec 08 '17 at 12:30

answered Dec 08 '17 at 12:25

Vinod Bhavnani

2,185
1
16
19

I think he wants to retrieve the input element - which has a dynamic ID. – JasonK Dec 08 '17 at 12:28
He doesn't need to retrieve the input element. Angular will update the input element with the new lat and ind values automatically – Vinod Bhavnani Dec 08 '17 at 12:28
Oh, I probably misinterpreted the question, my bad. Though I don't think `.run()` will change anything as it is used to **reenter** the Angular zone, but I don't see any usage of `.runOutsideAngular()`. – JasonK Dec 08 '17 at 12:42
"Zones wrap asynchronous browser APIs, and notify a consumer when an asynchronous task has started or ended. Angular takes advantage of these APIs to get notified when any asynchronous task is done. This includes things like XHR calls, setTimeout() and pretty much all user events like click, submit, mousedown, … etc. Once notified, Angular knows that it has to perform change detection because any of the asynchronous operations might have changed the application state. This, for instance, is always the case when we use Angular’s Http service to fetch data from a remote server." – Vinod Bhavnani Dec 08 '17 at 12:45
https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html – Vinod Bhavnani Dec 08 '17 at 12:45
Yes, my problem that inputs got new values, but form.data object no: "addresses": [ { "lat": 0, "lon": 0 }, { "lat": 0, "lon": 0 } ] – Serhio g. Lazin Dec 08 '17 at 12:46
Sorry I didn't get what you are trying to say @Serhiog.Lazin – Vinod Bhavnani Dec 08 '17 at 12:49
@VinodBhavnani From the same article: "The nice thing about this is that we as developers don’t have to care about notifying Angular to perform change detection, because Zones will do it for us as Angular subscribes to them under the hood.". – JasonK Dec 08 '17 at 12:50
After server callback I am updating value of dynamic inputs. It works, but these values don't appear in form.value object. They appear only if I am typing on input manualy. My updating of inputs don't makes changes in form.value object – Serhio g. Lazin Dec 08 '17 at 12:51

Angular 2 get element by dynamic id

2 Answers2