angular2-changedetection

Change detection has changed. Before beta.16, if your view contains {{myArray}} , that binding won't update if you don't modify the array reference. E.g., if you push() items onto the array, the view won't update to show the new item. The explanation is (well, was) that because the array reference didn't changed, Angular change detection doesn't reevaluate the binding. This beta.15 plunker demonstrates this behavior. As of beta.16 (and hence RC.1), things are different. The {{myArray}} binding will now update even if the array reference hasn't changed! See this RC.1 plunker . I looked at the

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) { this.titleSubscription.unsubscribe(); } } } ChildComponent looks like this: export class

I would like to udpate my application view, triggered by events from service. One of my services injects the ChangeDetectorRef. Compilation works, but I am getting an error in the browser when the App is bootstrapped: No provider for ChangeDetectorRef! . I thought I needed to add it to my AppModule, but I can't find any documentation that suggests it is in a module that I can import there. I tried adding the class itself to the import array, but that caused an error. I also got an error trying to add it to the providers array in the module. Here is a simplified version of my service: import

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)); } noificationHandler(data) { this.publishUpdate(data) } publishUpdate(data) { this.mySubject.next(data); } component.ts

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? Günter Zöchbauer Angular only runs change detection when an async executed function completes. The function needs to be

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 {Component} from "angular2/core" @Component({ selector: 'my-app', template: ` <h1>{{TryoutRef.text}}</h1>

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.country.next(text); } } export class SharedService { country: string; state: string; city: string; street:

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.template.html): <div #widgetParentDiv class="Content"> <p>Sample widget</p> <table><tr> <td>Value1</td>