unsubscribe in rxjs(angular 2+)

background In reactive world(rxjs/ng2+), it is common and convenient to just create some subject/observable and subscribe to them for event handling etc. It is like the gof observer pattern​ out of the box. issue One caveat we recently have is, we call subscribe() of some subjects from our service in our ngOnInit or ngAfterViewInit funtions we forget to…

href # does not always do nothing

Today we were facing an issue that the angular universal generates an anchor element with href=”false” so before the js is loaded, the anchor would lead user to /false. My first thought is to just put a href=”#’ so that it does nothing. Our url is something like http://www.c1.com/local. After adding the #, the click always navigate…

exclude file from karma coverage report

We have some files that is not so testable (like animation related, or things like polyfills) to be excluded from the karma coverage report. With angular-cli looks like it is straightforward that we can include the below config: However since we are not using cli , we need to tweak ourselves. Found the PR that implements the…

angular change detection notes

Was reading some angular change detection related articles trying to understand it. some note. Angular can detect when component data changes, and then automatically re-render the view to reflect that change. NgZone ngZone is an angular verison of zone.js, which patches the browser async calls like user event(click/keyup etc), settimeout/interval, XHR.  It is similar to…

Angular Rxjs Error Handling flow

In Angular 2+, http are all RX based. so the error flow is quite different from what we used to have in angular 1.x’s promise based way. consider the code So the basic flow is if anything exception happened, the error handler function in the catch block will be called first. That function should return an…

How angular js works

1 bootstrap flow: http://java.dzone.com/articles/how-angularjs-works-%E2%80%93 angularInit method which checks for ng-app module bootstrap method which is invoked once an ng-app module is found. Following are key invocations from within bootstrap method: createInjector method which returns dependency injector. On dependency injector instance, invoke method is called. For example if myModule has ‘greeter’ dependency. we get it like…

Angular’s $scope event system $emit, $broadcast and $on

Angular’s $emit, $broadcast and $on fall under the common “publish/subscribe” design pattern, or can do, in which you’d publish an event and subscribe/unsubscribe to it somewhere else. The Angular event system is brilliant, it makes things flawless and easy to do (as you’d expect!) but the concept behind it isn’t so simple to master and…