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.Autocomp         


        

Answer 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

Answer 2

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();
}