Ionic 3 and Ngzone is not working - not updating the results to HTML view

Question

I want to perform some action after Bluetooth connection is done and vice versa.
Handled scenarios for connection and added success and failure handler also, and changing a flag to True and False in those handler functions.
I printed that value using console.log, it changes in a component file but does not reflect in HTML.
I tried using ngZone, but it's not working.
Success and failure handle code are as follows:

BluetoothService

import { Injectable } from "@angular/core";
import { BLE } from '@ionic-native/ble';


@Injectable()
export class BlueToothService {

    constructor(private ble: BLE){
    }

     public connect = (deviceId, onConnect, onFailure) => {
        this.ble.isConnected(deviceId)
            .then(response => {                   
                onConnect(response);
            },
            error =>  {
                this.ble.connect(deviceId)
                    .subscribe(response => {
                        onConnect(response);
                    },
                    error =>  {
                        onFailure(error);         
                    });            
        });
    } }

Component File

import {Component, NgZone} from '@angular/core';
import {Events, IonicPage, NavController, NavParams, ViewController} from 'ionic-angular';

import {BlueToothService} from '../../../providers/bluetooth/bluetooth.service';

@IonicPage()
@Component({
    selector: 'test-data',
    templateUrl: 'test-data.html',
})
export class AddTestKitDataPage {
    public isBluetoothConnected: boolean = false;
    public deviceId: any;

    public connectToBLE() {
        this.blueToothService.connect(this.deviceId, onConnectionSuccess, onConnectionFailure);  //Assume device id is already present
    }

    private onConnectionSuccess = (reason) => {
        this.zone.run(() => {
            this.isBluetoothConnected = true;       
        });
    };

    private onConnectionFailure = (reason) => {
        this.zone.run(() => {
            this.isBluetoothConnected = false;
        });
    } }

HTML

<ion-content>

    <div text-center *ngIf="!isBluetoothConnected">
        Bluetooth Connection failure
    </div>

    <div text-center *ngIf="isBluetoothConnected">
        Bluetooth Connection success
    </div>

    <button ion-button full class="primaryBlockButton" (click)="connectToBLE()">Click</button>

</ion-content>

it's passed as this.bluetoothService.connect(this.onConnectionSuccess, this.onConnectionFailure); — Pradnya Sinalkar, May 15 '18 at 12:22
So what is the reason to use zones here? By default angular won't do change detection for state change of bluetooth, correct? — Sergey Rudenko, May 15 '18 at 15:59
if console.log shows changes OK and the view is not updating - this means Angular is not picking up a change here. Try this hack: private onConnectionSuccess = (reason) => { this.zone.run(() => { setTimeout(()=>{ this.isBluetoothConnected = true; console.log("isBluetoothConnected---", this.isBluetoothConnected); },0) }); }; — Sergey Rudenko, May 15 '18 at 16:13
Cool. Basically this means for change detection to happen you need a proper trigger. This “hack” is using async function that angular cares about hence it works. So to avoid hack you may need to use other approach that makes angular run the check or use change detection methods — Sergey Rudenko, May 16 '18 at 06:49
See this: https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular — Sergey Rudenko, May 16 '18 at 06:54

score 4 · Answer 1 · answered May 16 '18 at 14:22

Since console.log does confirm that in your case data actually changes, while the view (template) is not getting an update - this hints that Change Detection is not taking place.

To validate that you did already try the "hack" and according to you in comments it worked:

private onConnectionSuccess = (reason) => { 
    this.zone.run(() => { 
        setTimeout(() => { 
            this.isBluetoothConnected = true; 
            console.log("isBluetoothConnected---", this.isBluetoothConnected); 
        },0) 
     }); 
};

Basically the hack "wraps" your data change into an async (setTimeout) activity that Angular picks up.

Now to address it you could either ensure that data change in your case happens via event that Angular picks up naturally (add custom even listener for example).

Or try to use change detection to detectChanges manually after data changed:

import CDR:

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

inject it:

constructor (private cdr: ChangeDetectorRef) {}

Add it to your method:

private onConnectionSuccess = (reason) => { 
    this.isBluetoothConnected = true; 
    console.log("isBluetoothConnected---", this.isBluetoothConnected);
    this.cdr.detectChanges();
};

Try this approach as I think it will be better than the hack.

Ionic 3 and Ngzone is not working - not updating the results to HTML view

1 Answers1