angular2-changedetection

I have a list of components that contain dates(formatted with toLocaleString() ) and other things. On top of them there is a component for creating new components, wich contains a form with some inputfields built with angulars FormBuilder. When I type fast the validation lags and the text I'm typing isn't displayed immediately. I assume that Angular is rerendering all components, because if I don't display the date in the other components I can type pretty fast without lags. Is there a way to only rerender the input field I'm typing in, since all other components cannot change or is

I'm having difficulty with a component that doesn't refresh upon log in. The component is navbar.component that contains links to my pages/components. On it, there is a "login" link that renders login.component on which I can provide username and password and click the login button. login.component uses user.service which calls the backend with the username and password provided by login.component, stores the received token and redirects to '/'. At this point, the "login" link on navbar.component should be hidden and the "logout" link shown, but nothing happens until I click one of the other

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 child component that updates a property on the parent Parent property update fires another event that

I have google maps which triggers 100+ times per second change detection. how to disable change detection for this. Click here for map preview it will be even worse when using mouseover event. ngDoCheck() { console.log('do check', this.i++); } I had the same issue, try injecting the NgZone class on your component constructor constructor(private zone: NgZone) { ) then, use the runOutsideAngular method from NgZone to put in a callback the draw method from google charts, do something like this. this.zone.runOutsideAngular(() => { var chart = new google.visualization.PieChart(nativeElement); chart

Trying to render the window size on window resize through a stream in an angular 2 component utilizing an async pipe: <h2>Size: {{size$ | async | json}}</h2> const windowSize$ = new BehaviorSubject(getWindowSize()); Observable.fromEvent(window, 'resize') .map(getWindowSize) .subscribe(windowSize$); function getWindowSize() { return { height: window.innerHeight, width: window.innerWidth }; } @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Size: {{size$ | async | json}}</h2> </div> `, directives: [] }) export class App { size$ = windowSize$.do(o => console.log('size:', o));

I've a simple question about change detection. I have a component and a (global) service with a boolean inside. How can I make the component listen to that boolean and execute a function if that boolean changes? Thanks! Depending on how that boolean changes you could expose it as an Observable<boolean> on your service, and then subscribe to that stream in your component. Your service would look something like: @Injectable() export class MyBooleanService { myBool$: Observable<boolean>; private boolSubject: Subject<boolean>; constructor() { this.boolSubject = new Subject<boolean>(); this.myBool$

I'm binding an scroll event to capture the scroll and do something with it, I've created a directive like bellow : So I have simple directive which has nothing but : constructor ( private el : ElementRef , private renderer : Renderer ) { this.domAdapter = new browser.BrowserDomAdapter(); this.ruler = new Ruler( this.domAdapter ); } ngAfterViewInit () : any { this.renderer.listenGlobal( 'window' , 'scroll' , ()=> { console.log( 'scrolling' ); } ); return undefined; } This is working fine , expect that I can see that it fires a change detection on scroll in all of my application. This is inside

This question already has an answer here: Triggering change detection manually in Angular 5 answers I'm creating a Facebook service that calls the Facebook javascript api and am wondering how to best implement change detection when my values are updated. I have a UserService which has a currentUser property that is a BehaviorSubject: currentUser: Subject<User> = new BehaviorSubject<User>(new User(null)); And when I want to update the user in response to the facebook javascript sdk telling me the user has logged in or logged out, I update that and need to call tick() on an ApplicationRef :