Difficulty to work with ion-alert on android

Capacitor
1

I tried to implement an ion-alert which is showed when I set [isOpen] to true. This works fine when I start my app with the CLI “ionic serve” on my browser.

But when I “capacitor” the thing to build an android app and launch it via Android Studio, the alert does not want to show on both the emulator and a physical device. On both (emulator and device) I used the “chrome://inspect” debugger. I can see in the HTML the ion-alert object, so it has been integrated properly but can’t find the option that makes/prevents it from showing.

This is my HTML (obviously :thinking:) :

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Garage door remote</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="flex-center">
    <ion-button (click)="toggleGarageDoor()" shape="round" size="large" color="success">Open/Close</ion-button>
  </div>
  <ion-alert
    [isOpen]="alertOpened"
    header="Alert"
    subHeader="Server connection error"
    message="Can't establish connection to the server. Please quit and launch the app again"
    (willDismiss)="handlingAlertDismiss()"
    [buttons]="alertButtons"
    backdropDismiss="false"
  ></ion-alert>
</ion-content>

And this is my TS associated :

import { Component, OnInit } from '@angular/core';
import { Websocket, WebsocketBuilder } from 'websocket-ts';

@Component({
  selector: 'app-remote',
  templateUrl: './remote.page.html',
  styleUrls: ['./remote.page.scss'],
})
export class RemotePage implements OnInit {

  /* Public properties */
  connectionSucceeded: boolean;
  alertOpened: boolean;
  alertButtons: string[];
  
  /* Private properties */
  private _ws: Websocket;
  
  
  /* Constructor */
  constructor() {
    this.alertButtons = ['Quit'];
    this.alertOpened = false;
    this.connectionSucceeded = false;
    this._ws = new WebsocketBuilder('ws://myserver:myport')
      .onOpen((i, ev) => this.handlingWsOpening(i, ev))
      .onError((i, ev) => this.handlingWsError(i, ev))
      .build();
  }

  /* Methods */
  ngOnInit(): void {
  }

  handlingWsOpening(i: Websocket, ev: any): void {
    this.connectionSucceeded = true;
  }
  
  handlingWsError(i: Websocket, ev: any): void {
    this.connectionSucceeded = false;
    this.alertOpened = true;
  }

  handlingAlertDismiss(): void {
    this.alertOpened = false;
  }

  toggleGarageDoor() {
    this.alertOpened = true;
  }
}

This code works just fine on browser.

Edit : I just tried to use the basic “trigger” keyword in “ion-alert” triggering on the “ion-button” and this method works… So it appears that I’m doing something wrong with the “isOpen” keyword.

Thanks for your help.

2

showing us your code could be a good starting point :smiley:

3

Hi @ciccilleju. I edited my post as you requested.

4

Up ! Does someone have an idea ?

5

I will check today as soon as possible and let you know

6

I’m not facing any issue (I had to remove the ws part of code) both on emulator and real device.

I think you must check the websocket code, maybe there is something that breaks your code.

7

Thanks for the look.

I wonder, you seem to click on the button to activate the alert. Did you use the trigger method with the button id as the trigger ?

8

I’ve used your code completely but the part of websockrt

9

Thanks for looking into it.

I added this lines of code so I can be able to print a message showing where I ended up.

In the HTML :

<ion-content [fullscreen]="true">
  <div class="flex-center">
    [...]
    {{ statusMessage }}
  </div>
  [...]
</ion-content>

And in the typescript :

statusMessage: string;

handlingWsOpening(i: Websocket, ev: any): void {
    this.statusMessage = "Connected"
  }

handlingWsError(i: Websocket, ev: any): void {
    this.alertOpened = true;
    this.statusMessage = "Error"
  }

When the client can’t establish connection, it displays “Error” right next to the button. So I obviously go through the error handler until the end. But the ion-alert won’t show itself.

Any clue on that ? Do you still think the websocket is breaking something ?