angular2-changedetection

Updating value in parent component from child one causes ExpressionChangedAfterItHasBeenCheckedError in Angular

阅读更多关于 Updating value in parent component from child one causes ExpressionChangedAfterItHasBeenCheckedError in Angular

问题 I have two component: ParentComponent > ChildComponent and a service, e.g. TitleService . ParentComponent looks like this: export class ParentComponent implements OnInit, OnDestroy { title: string; private titleSubscription: Subscription; constructor (private titleService: TitleService) { } ngOnInit (): void { // Watching for title change. this.titleSubscription = this.titleService.onTitleChange() .subscribe(title => this.title = title) ; } ngOnDestroy (): void { if (this.titleSubscription) {

Angular2 zone.run() vs ChangeDetectorRef.detectChanges()

阅读更多关于 Angular2 zone.run() vs ChangeDetectorRef.detectChanges()

问题 Say I have a function noificationHandler() in my service.ts that is outside of angular's context. noificationHandler() is invoked by a third party and noificationHandler() basically consumes an array and emits the array to components which have subscribed to his service. service.ts public mySubject: Subject<any> = new Subject(); public myObservable = this.mySubject.asObservable(); constructor() { this.registry.subscribe("notification.msg",this.noificationHandler.bind(this)); }

Angular2: Watch an external variable outside of angular

阅读更多关于 Angular2: Watch an external variable outside of angular

问题 I want to be able to watch and update when a variable outside of angular2 changes. So let's say I have this in an external javascript file: var test = 1; How can I bind this variable to a property in a component? @Component({ ... }) export class MyComponent { watchy = window.test; } Apparently this should just work, according to this answer. But it doesn't. If I change the variable in the console, the variable does not update displayed in a template. Am I missing something? 回答1: Angular only

How to detect when an @Input() value changes in Angular?

阅读更多关于 How to detect when an @Input() value changes in Angular?

I have a parent component ( CategoryComponent ), a child component ( videoListComponent ) and an ApiService. I have most of this working fine i.e. each component can access the json api and get its relevant data via observables. Currently video list component just gets all videos, I would like to filter this to just videos in a particular category, I achieved this by passing the categoryId to the child via @Input() . CategoryComponent.html <video-list *ngIf="category" [categoryId]="category.id"></video-list> This works and when the parent CategoryComponent category changes then the categoryId

Angular 2 How to get Angular to detect changes made outside Angular?

阅读更多关于 Angular 2 How to get Angular to detect changes made outside Angular?

问题 I am trying to create a simple example project to test the angular 2 change detection mechanism: I create a pure javascript object in script tags on the main index page. it contains the following: var Tryout = {}; Tryout.text = "Original text here"; Tryout.printme = function(){ console.log(Tryout.text); } Tryout.changeme = function(){ Tryout.text = "Change was made"; } One function to console log it, and one to change the text property. Now in Angular 2 the code looks like this: import

behaviourSubject in angular2 , how it works and how to use it

阅读更多关于 behaviourSubject in angular2 , how it works and how to use it

问题 I am trying to build a shared service as follow import {Injectable,EventEmitter} from 'angular2/core'; import {Subject} from 'rxjs/Subject'; import {BehaviorSubject} from 'rxjs/subject/BehaviorSubject'; @Injectable() export class SearchService { public country = new Subject<SharedService>(); public space: Subject<SharedService> = new BehaviorSubject<SharedService>(null); searchTextStream$ = this.country.asObservable(); broadcastTextChange(text: SharedService) { this.space.next(text); this

Angular2 ngFor OnPush Change Detection with Array Mutations

阅读更多关于 Angular2 ngFor OnPush Change Detection with Array Mutations

问题 I have a data table component ( angular2-data-table ) project where we changed the project from Angular's traditional change detection to OnPush for optimized rendering speeds. Once the new change detection strategy was implemented, a bug was filed referencing the table is not updating when the data object is mutated such as object's property updates Reference: https://github.com/swimlane/angular2-data-table/issues/255. A strong use case can be made for this type of need for things such as

Angular2 - Expression has changed after it was checked - Binding to div width with resize events

阅读更多关于 Angular2 - Expression has changed after it was checked - Binding to div width with resize events

问题 I have done some reading and investigation on this error, but not sure what the correct answer is for my situation. I understand that in dev mode, change detection runs twice, but I am reluctant to use enableProdMode() to mask the issue. Here is a simple example where the number of cells in the table should increase as the width of the div expands. (Note that the width of the div is not a function of just the screen width, so @Media cannot easily be applied) My HTML looks as follows (widget

@ViewChild in *ngIf

阅读更多关于 @ViewChild in *ngIf

Question What is the most elegant way to get @ViewChild after corresponding element in template was shown? Below is an example. Also Plunker available. Template: <div id="layout" *ngIf="display"> <div #contentPlaceholder></div> </div> Component: export class AppComponent { display = false; @ViewChild('contentPlaceholder', {read: ViewContainerRef}) viewContainerRef; show() { this.display = true; console.log(this.viewContainerRef); // undefined setTimeout(()=> { console.log(this.viewContainerRef); // OK }, 1); } } I have a component with its contents hidden by default. When someone calls show()

What's the difference between markForCheck() and detectChanges()

阅读更多关于 What's the difference between markForCheck() and detectChanges()

What is the difference between ChangeDetectorRef.markForCheck() and ChangeDetectorRef.detectChanges() ? I only found information on SO as to the difference between NgZone.run() , but not between these two functions. For answers with only a reference to the doc, please illustrate some practical scenarios to choose one over the other. Milad From docs : detectChanges() : void Checks the change detector and its children. It means, if there is a case where any thing inside your model (your class) has changed but it hasn't reflected the view, you might need to notify Angular to detect those changes