New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0.0-beta.15] ActionSheet denys changes in the component properties #16257

Open
MrSparklle opened this Issue Nov 7, 2018 · 1 comment

Comments

Projects
None yet
1 participant
@MrSparklle

MrSparklle commented Nov 7, 2018

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/Users/xxx/.nvm/versions/node/v10.13.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.8.7
   @angular-devkit/schematics    : 0.8.7
   @angular/cli                  : 6.2.7
   @ionic/angular-toolkit        : 1.1.0

System:

   NodeJS : v10.13.0 (/Users/xxx/.nvm/versions/node/v10.13.0/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug
ActionSheet denys changes in the component properties

Steps to Reproduce

  1. Create a page with the code bellow.
  2. When the app starts the image old.png is showed
  3. Click in the button Change Picture
  4. Nothing happening

Related Code
home.ts

export class HomePage {
  public avatarUrl = 'assets/imgs/old.png';

  constructor(private actionSheetCtrl: ActionSheetController) {}

  async changePicture() {
    const actionSheet = await this.actionSheetCtrl.create({
      buttons: [
        {
          text: 'Change Picture',
          icon: 'camera',
          handler: () => {
            this.avatarUrl = 'assets/imgs/new.png';
            console.log('picture may be changed');
          }
        },
        {
          text: 'Cancelar',
          role: 'cancel'
        }
      ]
    });
    await actionSheet.present();
  }
}

home.html

<ion-content padding>
  <ion-item>
    <img [src]="avatarUrl" width="100" height="100">
  </ion-item>
  <ion-item>
    <ion-button (click)="changePicture()">
      Change Picture
    </ion-button>
  </ion-item>
</ion-content>

Expected Behavior
When clicked, changePicture() function need to replace the image avatarUrl from picture old.png to new.png.
It's just happening if you click in the image after the clicked the button Change Picture

ezgif-4-99e96eb189ed

Additional Context
This example above is a simple example when we need to get a picture from câmera, and after the user takes his picture, is needs to be immediately showed in the app.

@ionitron-bot ionitron-bot bot added the triage label Nov 7, 2018

@MrSparklle MrSparklle changed the title from ActionSheet denys changes in the component properties to [4.0.0-beta.15] ActionSheet denys changes in the component properties Nov 7, 2018

@MrSparklle

This comment has been minimized.

MrSparklle commented Nov 7, 2018

I found a workaround with some help from people in #Slack:

At handler isn't being run inside an ngZone so angular's change detection doesn't pick it up the click, afterwards does trigger Angular to run change detection.

home.ts

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

// replace this
//this.avatarUrl = 'assets/imgs/new.png'; 

// with this:
this.ngZone.run(() => this.avatarUrl = 'assets/imgs/new.png');

Not sure if that's something ionic should be handling or not.
Given their move to custom elements, angular change detection isn't applicable at ionics' lowest component logic level.

If Ionic don't add it, there should at least be a "gotcha" added to the documentation for handlers not running in an angular zone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment