RxJS in Angular: Part II

In this article, we are going to further explore the notion of reactive programming, but also apply it to more complex situations, and find beautiful solutions even for the ugliest problems.

In this article, we are going to further explore the notion of reactive programming, but also apply it to more complex situations, and find beautiful solutions even for the ugliest problems.

In my previous article I explored the ways in which RxJS makes frontend development in Angular so much more fun and easy than it is; we discussed the topics of reducing the component state, deriving view state from actual state using RxJS operators instead of imperative commands, and thinking in a reactive way in general. In this article, we are going to further explore the notion of reactive programming, but also apply it to more complex situations, and find beautiful solutions even for the ugliest problems.

From imperative to reactive#

Most of us are already aware that RxJS uses a very declarative approach to programming, while Angular itself, being the object oriented framework it is, sometimes (maybe involuntarily) encourages imperative patterns. We can try to get rid of the imperative code by using the approach mentioned in part I, which is "always think from the perspective of how the state affects the UI and how to derive the state to be displayed from the state at hand". Let me repeat the points from part I; to solve any problem at hand we need to:

1. Understand what part of the state affects the UI and make it an Observable stream;
2. Use RxJS operators to perform calculations and derive the final state to be used in UI
3. Use the async pipe to put the result of our computations in the template

Now let's try to do it on an example of a problem which most of the less experienced Angular developers would probably solve by writing imperative code. Imagine we have a component that displays the current time in a specific format (let's say am/pm vs 24h), and also a dropdown which allows the user to select the preferred format. To make things easier, let's imagine we also have access to a formatTime  function, which receives the time and the format and returns the pretty, ready for UI version of it. Now let's start with the ugly, imperative solution:

angular rxjs best-practices javascript typescript

React and TypeScript are two awesome technologies used by a lot of developers these days. It can be tricky to work with React and TypeScript and find the right answers, so we've put together the best practices and examples to clear your doubts.

In this post, you'll learn some practical uses of Symbols in JavaScript and TypeScript

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Get to know here difference between JavaScript & TypeScript, In this blog explained with pros and cons of TypeScript & JavaScript.

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc