Angular 2 Not Updating Until Any Object Is Clicked

Angular 2 not updating until any object is clicked

So it turns out that the sobotService was returning a q.js promise and not an ES6 promise. I believe this is probably why it didn't update as I'd expect it to like it did in the Heroes Tutorial.

By forcing it to update in the zone eg:

  this.sobotService .getRobots().then(ODataRobots => {
      this.zone.run(() => this.sobots = ODataRobots.data);          
  });

It managed to update the view as soon as the promise resolved.

I'll probably have to figure out if there is an easy way to remove the q.js promise from the library I am using (o.js) but in the meantime this works as expected!

*ngFor not updating until click

You can try manually calling detectChanges to make the rendering happen,

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){
}

Then use:

chRef.detectChanges(); // whenever you need to force update view

Component variable change not updated in view until mouseover in Angular 2

It seems the call to switchToEditable() and switchToUnEditable() are somehow made outside of Angulars zone.

If you invoke change detection explicitly it should work:

constructor(private cdRef:ChangeDetectorRef) {}

switchToEditable(){
  this.editable = true;
  this.cdRef.detectChanges();
}

switchToUnEditable() {
  ...
  this.editable = false;
  this.cdRef.detectChanges();
}

Angular 2 - View not updating after model changes

It might be that the code in your service somehow breaks out of Angular's zone. This breaks change detection. This should work:

import {Component, OnInit, NgZone} from 'angular2/core';

export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private zone:NgZone, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                 this.zone.run(() => { // <== added
                     this.recentDetections = recent;
                     console.log(this.recentDetections[0].macAddress) 
                 });
        });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

For other ways to invoke change detection see Triggering change detection manually in Angular

Alternative ways to invoke change detection are

ChangeDetectorRef.detectChanges()

to immediately run change detection for the current component and its children

ChangeDetectorRef.markForCheck()

to include the current component the next time Angular runs change detection

ApplicationRef.tick()

to run change detection for the whole application

Angular View not updating after model changes

Angular does update binding on browser events for the same Angular uses zonejs which monkey patches several browser events, and it fires detectChanges method to keep binding in a sync.

In this case Angular doesn't update binding, since Audio API event's doesn't monkey patch by zonejs. For such scenarios you have to run change detection manually to update bindings manually. You could use ontimeupdate event handler of audio API.

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

export class AppComponent {
  title = 'media player';
  audio;
  currentTime: number;

  constructor(private cd: ChangeDetectorRef ) {
  }
  ngOnInit(){
     this.audio = new Audio();
     this.audio.src = './Music/demo2.MP3';
     this.audio.play();
     //this will make sure to update when time updates.
     this.audio.ontimeupdate = (event) => {
        this.currentTime = this.audio.currentTime;
        this.cd.detectChanges();
     }
  }
}

Angular 2 Custom Pipe not Updating Until Object Saved

You need to add some action for the ngModelChange event

<input type="text" [ngModel]="obj.phone | phone" (ngModelChange)="obj.phone=$event" />

---

Related Topics