value not updating in the view after data update , angular2 and typescript

Question

this is my ngOnInit function

 instance.input = document.getElementById('google_places_ac');
        autocomplete = new google.maps.places.Autocomplete(instance.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            instance.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);

         });

and this is my setValue() function

public setValue(a,b,c) {
    this.coutnry = a;
    this.state = b;
    this.city = c;
    this.sharedService.country = this.coutnry;
    this.sharedService.city = this.city;
    this.sharedService.state = this.state;
    console.log(a, b, c);
}

and below is my html template to show and get the values

 <input id="google_places_ac" attr.state="{{state}}" attr.country="{{coutnry}}" name="google_places_ac" type="text" value="{{city}}" class="form-control" />

the problem is my html attributes not getting updated once place_changed function is called,is there anything i have to do to get updated values on view?

micronyks · Accepted Answer · 2016-04-03 16:36:02Z

3

you can check this angular2 official docs for setting up the attributes,

cheatsheet - https://angular.io/docs/ts/latest/cheatsheet.html

<input id="google_places_ac" [attr.state]="state" [attr.country]="coutnry"
name="google_places_ac" type="text" value="{{city}}" class="form-control" />

Update

import { Component, ChangeDetectorRef } from 'angular2/core';

constructor(private cdr:ChangeDetectorRef) {
}
public setValue(a,b,c) {
    this.coutnry = a;
    this.state = b;
    this.city = c;
    this.sharedService.country = this.coutnry;
    this.sharedService.city = this.city;
    this.sharedService.state = this.state;
    console.log(a, b, c);
    this.cdr.detectChanges();
}

edited Apr 3, 2016 at 16:36

answered Apr 3, 2016 at 15:45

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ironsun Over a year ago

i changed console.log to console.log(this.coutnry, this.state, this.city); this its showing proper values but no update on the view

micronyks Over a year ago

This could be changeDetection problem or ngZone problem. Check my udpdated answer.

Ironsun Over a year ago

yes dude... thank a lot for enlightening me with changedetection :)

Ironsun Over a year ago

hey i just got a follow up problem , how can i detect changes on child element from parent , the event is fired from parent component and child component is in route-outlet getting value from shared service , can you help me?

Pankaj Parkar Over a year ago

@micronyks haven't look at code..as it has been fired from outer context of A2.. +1 for core problem of change detection

|

Pankaj Parkar · Accepted Answer · 2016-04-03 15:47:12Z

1

You should use property binding by wrapping attribute inside []

<input id="google_places_ac" [attr.state]="state" [attr.country]="coutnry" 
 name="google_places_ac" type="text" [value]="city" class="form-control" />

Additional thing is, you made typo while writing country like you wrotecoutnry instead in two places.

this.sharedService.country = this.coutnry; //in constructor

attr.country="{{coutnry}}" //second place

edited Apr 3, 2016 at 15:47

answered Apr 3, 2016 at 15:43

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

8 Comments

Ironsun Over a year ago

when i do that i get thi long error Got interpolation ({{}}) where expression was expected at column 0 in [{{state}}] and this for all attrs. i am calling this function in ngOnInit

Pankaj Parkar Over a year ago

@Ironsun are you sure you change you code to my udpated answer?

micronyks Over a year ago

Eagle eyes @PankajParkar

Ironsun Over a year ago

ok i was using {{}} but now not getting the error but still values not updating

Pankaj Parkar Over a year ago

@Ironsun could you debug and confirm that setValue function is setting state & other value correctly?

|

Collectives™ on Stack Overflow

value not updating in the view after data update , angular2 and typescript

2 Answers 2

9 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related