Tips for using $apply and $digest in Angular 4 and IONIC 3?

Question

Tips for using $apply and $digest in Angular 4 and IONIC 3?

I am currently working on developing an application using IONIC 3, but facing challenges with the view not refreshing properly.

During my experience with Angular 1X, I used to use $apply and $digest to resolve similar issues. How can I achieve the same in Angular 4?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BLE } from '@ionic-native/ble';

@Component({
  selector: 'page-led',
  templateUrl: 'led.html'
})
export class LEDPage {

  constructor(public navCtrl: NavController, private ble: BLE) {
    this['myCount'] = 0;
    this['valor'] = 0;
    this['messages'] = [];
    this['service_id'] = "19B10010-E8F2-537E-4F6C-D104768A1214";
    this.setMessage("Constructor: Begin!");
    this['ble'] = ble;
    this['ComandoTXT'] = "FIND BLYNK";
    this['targetDevice'] = {};
  }
  
  public Command(){
    if(this['ComandoTXT']==="FIND BLYNK") {
      this.findBlynk();
    }
    
    if(this['ComandoTXT']=== "CAMBIAR LED"){
      //this.txData();
      this.setMessage("CAMBIAR LED txData DISABLEd");
    }
  }
  
  public findBlynk(){
      this.setMessage("SCAN: Begin!");
      this['ComandoTXT'] = "Scanning...";

      let  ble = this['ble'];
      
      this.setMessage("SCAN: BLE ENABLE!");
      ble.enable();
      
      this.setMessage("SCAN: Setting Interval...");
      this['intervalHandle'] = setInterval(() => { // SET AN INTERVAL THAT RUNS EVERY 3 Seconds
        this.setMessage("INTERVAL: BLE SCAN...");
        //https://ionicframework.com/docs/native/ble/ 
        ble.scan([], 2 /*seconds (0) */).subscribe( data => { //DO SCAN DURING 1 SECOND
          this.setMessage("SCAN SUBSCRIBER: " + data['id'] + ' | ' + data['name'] + ' | ' + data['rssi']);
          if(data['name']=="Blynk"){
            this.setMessage("SCAN SUBSCRIBER: BLYNK FOUND! STOPPED SCANNING!");
            clearInterval(this["intervalHandle"]);
            this["targetDevice"] = data;
            this["ComandoTXT"] = "CAMBIAR LED";

            let idx = 0;
            while(idx<10000){
              this["test"] = idx;
              idx ++;
            }
          }
        });
      },2100);//END OF INTERVAL DEFINITION
    }  
  
  public setMessage(message){
    this['myCount'] ++;
    message = this['myCount'] + ':' + message;
    this['messages'].unshift(message);
  }

}

<ion-header>
  <ion-navbar>
    <ion-title>LED </ion-title>
    <button ion-button (click)="Command()">{{ComandoTXT}}</button>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p>LED Messages: ({{myCount}} | {{test}})</p>
  <hr />
  <p *ngFor="let message of messages">{{message}}</p>
</ion-content>

angular typescript apply ionic3 digest

Answer 1

Answer №1

Initially, the challenge stemmed from my lack of knowledge on how to utilize the ApplicationRef object in Typescript.

To resolve this issue, I incorporated "

import { ApplicationRef } from '@angular/core'

" at line 4 within my .ts file. Subsequently, I injected it in the constructor as private "applicationRef : ApplicationRef" on line 28 and executed "this.applicationRef.tick();" towards the end of callbacks like on line 81.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BLE } from '@ionic-native/ble';
import { ApplicationRef } from '@angular/core'

@Component({
  selector: 'page-led',
  templateUrl: 'led.html'
})


export class LEDPage {

  /**
   * Constants that we will use around the controller
   */
  public constants  = {
      CMD_FIND_ANGU:"FIND ANGU",
      CMD_STOP_SCAN:"Scanning... (Click to Stop)",
      CMD_TOGGLE_LED:"CAMBIAR LED",
      ON:"ON",
      OFF:"OFF"
    };

  /**
   * Constructor for the controller. Everything begins here.
   */
  constructor(public navCtrl: NavController, private ble: BLE, private applicationRef : ApplicationRef ) {
    this['messages'] = [];
    this['value'] = "ON FIRST TIME";
    this['service_id'] = "19B10010-E8F2-537E-4F6C-D104768A1215";
    this['characteristic_id'] = "19B10011-E8F2-537E-4F6C-D104768A1215";
    this['ble'] = ble;
    this['ComandoTXT'] = this.constants.CMD_FIND_ANGU;
    this['targetDevice'] = {};
    this.setMessage("Constructor: Begin!");
    this["applicationRef"] = applicationRef;
  }
  
[Additional code remains unchanged]
  
}

<ion-header>
  <ion-navbar>
    <ion-title>LED </ion-title>
    <button ion-button (click)="Command()">{{ComandoTXT}}</button>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p>LED  Messages: ({{myCount}} | {{test}})</p>
  <hr />
  <p *ngFor="let message of messages">{{message}}</p>
</ion-content>

Answer 2

Initially, the challenge stemmed from my lack of knowledge on how to utilize the ApplicationRef object in Typescript.

To resolve this issue, I incorporated "

import { ApplicationRef } from '@angular/core'

" at line 4 within my .ts file. Subsequently, I injected it in the constructor as private "applicationRef : ApplicationRef" on line 28 and executed "this.applicationRef.tick();" towards the end of callbacks like on line 81.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BLE } from '@ionic-native/ble';
import { ApplicationRef } from '@angular/core'

@Component({
  selector: 'page-led',
  templateUrl: 'led.html'
})


export class LEDPage {

  /**
   * Constants that we will use around the controller
   */
  public constants  = {
      CMD_FIND_ANGU:"FIND ANGU",
      CMD_STOP_SCAN:"Scanning... (Click to Stop)",
      CMD_TOGGLE_LED:"CAMBIAR LED",
      ON:"ON",
      OFF:"OFF"
    };

  /**
   * Constructor for the controller. Everything begins here.
   */
  constructor(public navCtrl: NavController, private ble: BLE, private applicationRef : ApplicationRef ) {
    this['messages'] = [];
    this['value'] = "ON FIRST TIME";
    this['service_id'] = "19B10010-E8F2-537E-4F6C-D104768A1215";
    this['characteristic_id'] = "19B10011-E8F2-537E-4F6C-D104768A1215";
    this['ble'] = ble;
    this['ComandoTXT'] = this.constants.CMD_FIND_ANGU;
    this['targetDevice'] = {};
    this.setMessage("Constructor: Begin!");
    this["applicationRef"] = applicationRef;
  }
  
[Additional code remains unchanged]
  
}

<ion-header>
  <ion-navbar>
    <ion-title>LED </ion-title>
    <button ion-button (click)="Command()">{{ComandoTXT}}</button>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p>LED  Messages: ({{myCount}} | {{test}})</p>
  <hr />
  <p *ngFor="let message of messages">{{message}}</p>
</ion-content>

Answer 3

Answer №2

To accomplish this task, you can utilize the LifeCycle::tick() method. Refer to the code snippet below:

import {Component, LifeCycle, NgZone} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  template: `
    <div>
      Hello world!!! Time: {{ time }}.
    </div>
  `
})
export class App {
  time: number = 0;

  constructor(lc: LifeCycle, zone: NgZone) {
    zone.runOutsideAngular(() => {
      setInterval(() => {
        this.time = Date.now();

        lc.tick(); // If you comment out this line, the "time" will stop updating
      }, 1000);
    })
  }
  doCheck() {
    console.log('check', Date.now());
  }
}

Answer 4

To accomplish this task, you can utilize the LifeCycle::tick() method. Refer to the code snippet below:

import {Component, LifeCycle, NgZone} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  template: `
    <div>
      Hello world!!! Time: {{ time }}.
    </div>
  `
})
export class App {
  time: number = 0;

  constructor(lc: LifeCycle, zone: NgZone) {
    zone.runOutsideAngular(() => {
      setInterval(() => {
        this.time = Date.now();

        lc.tick(); // If you comment out this line, the "time" will stop updating
      }, 1000);
    })
  }
  doCheck() {
    console.log('check', Date.now());
  }
}

Tips for using $apply and $digest in Angular 4 and IONIC 3?

Answer №1

Answer №2

Similar questions

Using Generic Types in TypeScript for Conditional Logic

Tips for avoiding sending empty fields when using Angular's HttpClient.post method

Displaying server errors in an Angular componentIn this tutorial, we

What is the process for importing a function dynamically in a Next.js TypeScript environment?

Issue encountered when attempting to access disk JSON data: 404 error code detected

Transitioning from ng-repeat filter to Typescript

Issue encountered while creating production build using Ionic

Is there a way to modify CSS class names on-the-fly within an Angular project?

Communicating between different components in Angular 11 using a service to share data

Positioning the Angular material menu items in the UI

Customize stepper background color in Angular Material based on specific conditions

Error encountered with Angular version 4: Unexpected token export

Guide to simulating Twilio with Jest and TypeScript to perform unit testing

Resolving NestJS Custom Startup Dependencies

lines stay unbroken in angular

Showcasing a single object in an IONIC/Angular application using the ngIF directive

The statement "import React from 'react'" is automatically removed by VS Code

In my Angular application, the Authentication JWT is securely stored by Firebase within the Session Storage. Does this implementation pose any security risks

Asynchronous data binding in Angular 2

Trigger on the cancellation or completion of a nested observable