angular - How to update view after change in angular2 after google event listener fired -
i trying update view after event listener fired. however, change not detected , isn't update until change detected.
import { component, view, bootstrap } 'angular2/angular2'; @component({ selector: 'app' }) @view({ template: '{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>' }) class app { keyword; autocomplete; click; constructor() { var _this = this; var input = (document.getelementbyid('keyword')); this.autocomplete = new google.maps.places.autocomplete(input); google.maps.event.addlistener(this.autocomplete, 'place_changed', function(){ console.log('place change'); _this.keyword = "updated text"; _this.click = "not clicked"; }); this.keyword = "original text"; this.click = "click me after selection made force change"; } update() { console.log("click"); this.click = "clicked"; } } bootstrap(app);<!doctype html> <html> <head> <link rel="stylesheet" href="style.css" /> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://jspm.io/system.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.30/angular2.dev.js"></script> <script src="https://maps.googleapis.com/maps/api/js??v=3.exp&libraries=places"></script> </head> <body> <app></app> <script> system.import('main'); </script> </body> </html>if change location in input, text left should change. changed after change detected, example clicking text below.
what doing wrong , how do right?
@jhadesdev led me in right direction instead of zone.runoutsideangular() needed zone.run(). here's full javascript code worked:
import { component, view, bootstrap, ngzone } 'angular2/angular2'; @component({ selector: 'app' }) @view({ template: '{{keyword}} <input id="keyword" /><br/><span (click)="update()">{{click}}</span>' }) class app { keyword; autocomplete; click; zone: ngzone; constructor(zone:ngzone) { this.zone = zone; var input = (document.getelementbyid('keyword')); this.autocomplete = new google.maps.places.autocomplete(input); google.maps.event.addlistener(this.autocomplete, 'place_changed', ()=>{ this.zone.run(() => { console.log('place change'); this.keyword = "updated text"; this.click = "not clicked"; }); }); this.keyword = "original text"; this.click = "click me after selection made force change"; } update() { console.log("click"); this.click = "clicked"; } } bootstrap(app);
Comments
Post a Comment