angularjs - Image not refreshed after taking a photo from a camera -

i using simple code ionic 2 :

<button (click)="takepicture()" >take pic!</button> <img [src]="url || '//:0'"> 

then typescript page :

import {page} "ionic-framework/ionic";  @page({     templateurl: 'build/pages/smartscan/smartscan.html' } )  export class smartscan {  public url:string;  constructor() {     console.log("starting smartscan page ..."); }  public takepicture() {     console.log("going take pic ...");     navigator.camera.getpicture( (imageuri) => {          this.url = imageuri;          console.log("uri of picture taken : "+this.url);          console.log(json.stringify(this));          //var image = document.getelementbyid('myimage');         //image.src = imageuri;      }, function (err) {         console.log(json.stringify(err));     }, {});     /* this.url = "http://maison-cresci.fr/uploads/images/nice_cresci_slide_environnement_003.jpg"; */ }  } 

after taking picture, nothing displayed. noticed "src" not updated angular. tested part of code in comments thats works using "var image= ... image.src=..." directly manipulating dom , don't want this.

please can see problem ?

try use zone.run() reenter angular zone task executed outside of angular zone.

that worked me async tasks local storage.

something like:

public takepicture() {     console.log("going take pic ...");     navigator.camera.getpicture((imageuri) => {           console.log("uri of picture taken : "+imageuri);          zone.run(()=>{ this.url = imageuri; })          //var image = document.getelementbyid('myimage');         //image.src = imageuri;       }, (err) => {          console.log(json.stringify(err));     }, {}); }