angular2-changedetection

Subscribing to Observable not triggering change detection

阅读更多关于 Subscribing to Observable not triggering change detection

问题 I am using 'angular2-virtual-scroll' to implement load on demand. The items used to be driven by observable's using the async pipe triggered by the parent component. Now i am trying to call my service from the child. The call is successful and i get my data, i need to use the subscribe event to apply other logic. The issue is change detected does not appear to be working when i update my arrays in the subscribe function. I have read other similar issues but i have had no luck finding a

Angular 2 detectChanges vs setTimeout()

阅读更多关于 Angular 2 detectChanges vs setTimeout()

问题 I'm facing an issue regarding angular 2 change detection. I'm using a component which uses the 'onPush' strategy and I've noticed that it's child component don't update them self on update (They themselves also 'onPush') so I've added changeDetector.detectChanges() to my code and it caused Maximum call stack size exceeded . I dag up a little bit and wound up doing setTimeout(() => { this.changeDetector.markForCheck(); }, 0); And the code worked just fine. My question is why angular

How can I prevent Firebase from repeatedly triggering change detection in Angular 2?

阅读更多关于 How can I prevent Firebase from repeatedly triggering change detection in Angular 2?

问题 Firebase uses a lot of internal asynchronous calls that trigger change detection because of Angular/Zone monkey-patching websockets and setInterval etc. Even when I'm not interacting with my app, I see a cascade of change detection happening all the time, which contributes to slowing things down especially on mobile. This default behavior could be useful, but the way I'm using Firebase right now I have pretty tight control over when I need to update the view, so callbacks from Firebase are

Angular2 template expression called twice for each component on change-detection

阅读更多关于 Angular2 template expression called twice for each component on change-detection

问题 Pretty standard situation. There is one parent component <item-list> . Inside its template with *ngFor generated 20 child components <item-block> . Child component styles set with [ngStyle] directive and template expression that calls function setStyles() . The problem (or maybe not) is that when any event emitted on one specific child element, expression setStyles() executed twice for each of child components. So if we click on one specific item in our example, and we have 20 <item-block>

Angular - Is binding a component method to DOM target property a wrong practice?

阅读更多关于 Angular - Is binding a component method to DOM target property a wrong practice?

问题 Say, I have a component which is used as following: <health-renderer [health]="getHealth()" [label]="label"> <health-renderer> After reading data-binding related parts from https://angular.io/guide/template-syntax, it seem like the way I am setting target component property health is wrong as the template expression used is getHealth() which is a method. And method binding should only be done with events, not properties. In other words, template expression (the thing on right-hand side of = )

Angular 2 change detection - How are circular dependecies between components resolved?

阅读更多关于 Angular 2 change detection - How are circular dependecies between components resolved?

问题 I've read that Angular 2 change detection is uni-directional, heading from the top to the bottom of the component tree, and that it gets stable after a single pass, meaning that there are no multiple cycles of change detection. Given those assumptions, what will happen in a situation where we have a parent and a child component which have properties that are interdependent? Example: Based on an user event, parent component updates a child component property This update fires an event in the

Why changeDetectionStrategy.OnPush does not update in @Input attribute change but does update @Output trigger attribute change?

阅读更多关于 Why changeDetectionStrategy.OnPush does not update in @Input attribute change but does update @Output trigger attribute change?

问题 Consider this plunker Grandchild Component <button (click)="back2click()"></button> @Input() from2; @Output() back2 = new EventEmitter<any>(); back2click() { this.back2.emit('hi'); } Child Component changeDetection: ChangeDetectionStrategy.OnPush, <my-app-n2 [from2]="from1" (back2)="handleback2($event)"></my-app-n2> @Input() from1; @Output() back1 = new EventEmitter<any>(); handleback2() { this.back1.emit('hi') } Parent Component <my-app-n1 [from1]="from" (back1)="handleback1($event)"></my

Angular2: Change detection inside observable

阅读更多关于 Angular2: Change detection inside observable

问题 Just I tried my first app with Angular2 RC3 (Using Angular-CLI) and I'm lost with this... I have a problem with "Change detection" of variable word . I update the word variable inside the subscribe method of Observable, but no changes detected. app.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { VoiceRecognitionService } from './voice-recognition.service'; @Component({ moduleId: module.id, selector: 'app-root', template: `<h1>{{word}}</h1>`, // => No prints

Angular 2 Modal Popup Error “Expression has changed after it was checked”

阅读更多关于 Angular 2 Modal Popup Error “Expression has changed after it was checked”

问题 Youtube video demonstrating the problem Github repository for the demo app I have a very simple app with an app component, a child component (account), alert service that handles a message dialog component (popup modal). For demonstrating purpose, I have two identical forms, one inside app.component.ts and one inside account.component.ts. Each of them has a button that calls the alert service to show the message dialog modal. The problem is that when I click in the input field of the form for

Angular2: Change detection timing for an auto-scroll directive

阅读更多关于 Angular2: Change detection timing for an auto-scroll directive

I've been working on a simple auto-scroll directive for chat-display: @Directive({ selector: "[autoScroll]" }) export class AutoScroll { @Input() inScrollHeight; @Input() inClientHeight; @HostBinding("scrollTop") outScrollTop; ngOnChanges(changes: {[propName: string]: SimpleChange}) { if (changes["inScrollHeight"] || changes["inClientHeight"]) { this.scroll(); } }; scroll() { this.outScrollTop = this.inScrollHeight - this.inClientHeight; }; } This directive will work when I've set enableProdMode() and when the ChangeDetectionStrategy is set to default, but when in "dev mode" I get an exception