Observables and Subjects in Angular

Simply put ReactiveX (Reactive Extensions) is an API for asynchronous programming with observable streams. It mainly follows Observer pattern as well as the Iterator pattern with functional programming. ReactiveX has few implementations for main programming languages such as 

• RxJava for Java
• RxJS for JavaScript
• Rx.NET for .NET

Here we'll focus on RxJS...

RxJS is a Reactive Extensions Library for JavaScript. It makes it easier to write asynchronous or callback based calls.

Observable: 

Invokable collection of future values or events. Subscribe to it to get the values. of returns an Observable. (check link for more details)

Observer is isolated from the logic. It just reacts to the details provided. Here you need to subscribe to it to get a value. You need to understand that Observables is not a angular specific feature. It's a standard for managing async data proposed to release with ES7.

Observables by default are “Cold” meaning they are lazy and won’t run any code until there is a subscriber.

Here there is no way to update the productIdList and run the subscription. You have to recreate the Observable. Still previous subscriptions won't get fired. 

Observer: Collection of callbacks that knows how to listen to values of Observables

Subscription: Execution of an Observable (see above example)

Operators: Pure functions that enables a functional programming style for dealing with observables. Above of is an operator which emit variable amount of values in a sequence and then emits a complete notification.

Subject: Same as EventEmitter. Way of multicasting a value or event to multiple Observables. Subject is another Observable type in rxjs. It can emit multiple event values.

Subject implements Observable. Unlike observables, anyone can listen and trigger events of Subject. 

Subject can emit events before subscriptions.

Outputs

An observable can be created from both Subject and BehaviorSubject using subject.asObservable().

Here you'll notice 1 is not printed because subscription started after value 1 is emitted. You can use ReplaySubject to emit previous values as well

BehaviorSubject is same as Subject but you can give it a default value. 

Notice that rack sensor values. Since we have not emitted any value initially. It'll print 1000 the default value. 

Scheduler: Centralized dispatchers to control concurrency. Using schedulers you can control when a notification from a rxjs method needs to be sent out. We don't use schedulers much in Angular

RxJS can be think of as Lodash for events.

Check following articles for more information

https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable
https://stackoverflow.com/search?q=%5Bangular%5D+observable

Read More

Angular 6 - Routing How to do it

While developing Angular apps, I thought of compiling a list of things we need to know on each of the areas. Here I cover routing.

Basics

• A routed Angular application has one singleton instance of the Router service
• The router uses a first-match wins strategy
• The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first
• Use path: '**' to match invalid routes (any other route that is not defined) for 404 redirections
• Use enableTracing: true for debugging purposes by passing as 2nd parameter to forRoot
• The router uses browsers history.pushState for navigation

Router Link

• Use RouterLinkActive directive helps identify active links. The router adds active css class to the a tag
• After the end of each successful navigation life cycle, the router builds a tree of ActivatedRoute objects that make up the current state of the router. You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

• The router adds the <router-outlet> element to the DOM and subsequently inserts the navigated view element immediately after the <router-outlet>.
• You can add redirectRoute for redirections (defined in router module)
• Only call RouterModule.forRoot in the root AppRoutingModule (or the AppModule if that's where you register top level application routes). In any other module, you must call the RouterModule.forChild method to register additional routes. (article)
• Always put app routing as last in main module

Authentication

• Use CanActivate guard to manage navigation business rules
• You can create component-less routes to manage authentication easily
• You can create a service which extends CanActivate which coul contain the security logic
• Use canActivate attribute with that service
• You can use CanActivateChild guard to protect child routes. It runs before any child route is activated

Read More