Angular detectChanges() or zone.run


#1

I’m trying to get an ActivityIndicator to show while a couple of loops run in a function.

I’m using:

onShowMeTablet(args: EventData){
        this.zone.run(() => {
        this.isWorking = true;
        });

    ...loops code

onShowMeTablet(args: EventData){
        this.zone.run(() => {
        this.isWorking = false;
        });

It does not seem to work. The ActivityIndicator never shows. If I set the boolean to true in ngOnInit the ActivityIndicator shows, so that part is working, just not when I set it in my function. Any help would be appreciated. I’m having a tough time understanding Angular’s change detection and ui updating.


#2

zone.run / detectChanges is only required when you are outside Angular context. If onShowMeTablet is triggered by any event, you are already inside Angular’s context.

If you can share a complete example, it’s easy to debug why it’s not updating.


#3

It’s doing a lot of loops to check against two arrays.

onShowMeTablet(args: EventData){
        this.zone.run(() => {
        this.isWorking = true;
        });
        this.ref.detectChanges();
        let dropsArray = this.playerService.getT10Drops();
        let dragsArray = this.playerService.getT10Drags();
        let correctArray = [];
        let incorrectArray = [];
        for(let i = 0; i<dropsArray.length; i++){
            for(let j = 0; j<dropsArray[i].dropped.length; j++){
                let element = this.cl.getViewById(dropsArray[i].dropped[j]['id']);
                if(dropsArray[i].descid === dropsArray[i].dropped[j]['descid']){
                    correctArray.push(dropsArray[i].dropped[j]);
                } else {
                    incorrectArray.push(dropsArray[i].dropped[j]);
                    element.className = "neutral";
                }
            }
        }
            for(let i = 0; i<dropsArray.length; i++){
                let count = 1;
                console.log('After getting dropsArray', dropsArray);
                dropsArray[i].dropped = [];
                for(let j = 0; j<dragsArray.length; j++){
                    console.log(dragsArray[j]);
                    if(dropsArray[i].descid === dragsArray[j].descid){
                        if(count<=dropsArray[i].totalAllowed){
                            let obj = {'id': dragsArray[j].id, 'descid': dragsArray[j].descid, 'currentPosition': count}
                            dropsArray[i].dropped.push(obj);
                            count++;
                        } else {
                            return;
                        }
                    }
                }
                count = 1;
                // console.log(dropzone.get('id') + " =top= " +dropzone.get('top'));
            }
            // console.log("drops", dropsArray);
            this.playerService.setT10Drops(dropsArray);

            for(let i = 0; i<dropsArray.length; i++){
                let dropzone = this.cl.getViewById(dropsArray[i].id);
                for(let j = 0; j<dropsArray[i].dropped.length; j++){
                    let dragObj = this.cl.getViewById(dropsArray[i].dropped[j]['id']);
                    let extraTop = dropsArray[i].dropped[j]['currentPosition'];
                    let dragObjOrigin = {'left': +dragObj.left, 'top': +dragObj.top};
                    dragObj.translateY = dropsArray[i].bounds[1] - dragObjOrigin['top'] + extraTop;
                    dragObj.translateX = dropsArray[i].bounds[0] - dragObjOrigin['left'];
                }
            }
            this.zone.run(() => {
                this.isWorking = false;
                });
    }