Hello everyone! You must have gone though the part-I of this article which is, Compilation in Angular Part-I, where we understood two modes of compilation AOT and JIT. In subsequent parts, we will understand more on how the compiler works. First let’s get started with the architecture of compilation.

How is the Compiler Set Up ?

We need to understand how the compiler is set up since it will help us to understand how TypeScript actually works under the hood as our compiler is based on TypeScript(TS).

The regular TS compiler is based on three phases: Program creation, Type-checking & Emit phases.

And Angular compiler has built on top of that, adding two more phases: an Analysis step and Resolve step. Let’s understand these steps one by one.

1] Program Creation

Here, TS find outs all the source files which are required to understand our program & it begins with tsconfig.json file. It recursively find imports of those and discover more files might be from app/other libs imported from node modules unti it’s seen all the code it needs to see the types in our program & checks them correctly.

In case with Angular we add into this process a little bit by adding some extra files that are not necessarily we write and that’s why it’s possible to import the factory files.

2] Analysis

In this step, it’s taking the full set of files from our code & looking through all the classes in them and trying to find out the ones which are decorated with the Angular decorators. Then it tries to understand what the parts of our application are, the components, the modules, the services, the directives and so on in isolation. If it’s a component, it will parse the template, likewise.

During the analysis phase, it is only looking at these classes on a one-by-one basis.

3] Resolve

After analysis is complete, after seeing all the classes, the resolve phase comes into the picture. Here it looks into everything again but with the larger picture. So when it looks at the component, it understands what module it belongs to. And through this it can make more global decisions & optimisations based on that. Also surface the errors related to the structure of the application.

4] Type-checking

This step is mostly for validations. It asks TypeScript to check on any errors in the program, the errors in the Angular templates. And this is done via code generation.

5] Emit

During this phase, the TS code goes through a series of transformations. And it merges down the line as downlevel JavaScript(JS) code that is ready to run in the browser. In this step, as it’s emitting JS code for each class, it’s also adding to it any of the imperative Angular code that we are generating if that class needs it. So we’re adding all the template functions to the components and other things like that.

This is most expensive step in compilation — translating TS code to JS.

These five phases describe at a high level what happens every time we invoke the Angular compiler. But every Angular application actually depends on running the compiler not just once but many times.

In the next article we will see about a ‘Compilation Model’ in brief.
Thanks for reading. Stay tuned !

Hello everyone! As most programming language use a compiler, so in this blog series we are going to understand how compilation works in Angular, it’s architecture, features, types, compilation model etc. In the part-I we will understand why Angular needs a compiler and it’s type on a high level, and in upcoming articles we will cover further points and understand more about it.

In a simple language,

A compiler is a special program that translates a programming language’s source code into machine code or another programming language.

Why does Angular have a compiler ?

The main job of a compiler is to translate the template we write into the code that runs at runtime. In Angular we write the templates declaratively, we specify what should happen, the components, selector for that component, the bindings etc, but not how it should happen.

Browsers however do not understand declarative Angular syntax. So we have to change it to something that the browser can understand. Then the question in your mind might arise, if this imperative code is needed anyway, why do we not directly write the code the browser can understand, and save the trouble of going through the compiler entirely ?

Reasons:

1. Less boilerplate, the less we have to think about how things work under the hood, how it renders, the more time we can focus on business logic.
2. Optimize the things, the code, the time.

So the compiler’s job is, to take declarative Angular instructions, both the templates & decorators that we write and translate them into imperative code. In short, the compilation in Angular meaning, converting the Angular code into plain JavaScript.

Compilation Methods in Angular

Our compiler can do this transformation in one of two different ways:

1. JIT (Just In Time)
2. AOT (Ahead Of Time)

Just In Time Compilation (JIT)

This is used in development mode of Angular. When we build an application in JIT mode, we take TypeScript code & compile using TypeScript compiler(tsc) and it gets translated into JS code. But here, all of the angular decorators that we have written actually end up in that bundled JS and they run in the browser. When those decorators execute in the browser, it calls our compiler and translates our templates, other Angular features into imperative code.

Ahead Of Time (AOT)

In this mode instead of running plain TypeScript compiler, it runs Angular compiler(ngc). Now let’s understand what is the difference between tsc and ngc compilers. ngc does the same thing as tsc compiler, it takes TS code and translates it into JS, but also it takes the Angular decorators which we have written & pre-compiled them into the imeprative instructions to render in a browser. So it would save the cost and time to compile those decorators at runtime unlike JIT. It also detects and reports template binding errors during the build steps before users can see them.

The compilation type JIT or AOT depends on the value of the aot property in the build configuration specified in angular.json. By default, aot is set to true from Angular-9.

JIT vs AOT

I hope these contents are helpful to understand the compiler, Angular compiler, JIT vs AOT. In the next blog, we will understand the architecture and features of the compiler.

Thanks for reading. Stay tuned !

To understand how JavaScript creates an execution context, first we need to understand the term ‘Hoisting’. Look at the below example:

fun();
console.log(greet);

function fun() {
 console.log(“fun() called!”);
}

var greet = “Hello World!”;

What output would you expect ? In most of the programming languages, we will consider this as an error, since it executes the code line by line & one line at a time. Since on the very first line there is a method called fun(), which is not defined yet. But JavaScript does not work like that. When you execute above lines of code, it will generate output as:

fun() called!
undefined

So even though the function was below the calling, it still ran. And the variable ‘greet’ is available on the second line, though it doesn’t have a proper value, but that variable somewhere is declared on that file. Now, if we do not define the variable ‘greet’ at all, then our compiler will throw an error as : “Uncaught ReferenceError: greet is not defined”. And this phenomenon is called ‘Hoisting’.

But don’t be under the wrong impression the way it is explained, means, in most of the websites it’s explained as — In JS, variables & functions are hoisted and moved to the top by JavaScript engine, as if they moved physically up to the top. It’s not like var greet = “Hello World!”; copied and moved at the top.

In JS, the variables & functions are to some degree available even though they’re written later in the code. To understand what JS is doing here, we need to understand the execution context and how it is created.

The execution context is created in two phases, the first phase is called the Creation Phase. In this phase we know, we have the ‘global object’ & ‘this’ which is set up within the memory that we have already seen in my past posts. Apart from that there is an outer environment. In this phase, the parser runs through the code and begins to set up what we have written for translation, it recognises where we have created variables & functions. In creation phase, it sets up the memory space for the variables & functions, and this step is called ‘Hoisting’.

Before the code begins to be executed line by line, the JavaScript engine has already set aside memory space for the variables and functions that we have created in that entire code we have built.

So those functions & variables exist in the memory, so when code executes line by line, it can access them. But functions entirely placed into the memory, means the function — it’s name and code inside the function is being executed.

The next phase of execution context is execution phase, where it actually executes the code line by line, and variables/functions assignments are set, example: var a equals to 3. So in creation phase, when the JS engine sets up the memory space for variable ‘a’, it doesn’t know it’s value at that time, so it puts the placeholder there called ‘undefined’. It means oh, I don’t know what this value is yet.

I hope hoisting is now clear, we will more talk about the ‘undefined’ in next post. Thanks for the reading !

Conclusion:

• Execution context has two phases: Creation and Execution phase.
• All variables in JavaScript are initially set to ‘undefined’. And functions are entirely sitting in the memory at creation phase. This is hoisting.

Thanks for reading !

Execution Context Creation & Hoisting was originally published in JS Essentials on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is reCaptcha ?

CAPTCHA stands for the Completely Automated Public Turing test to tell Computers and Humans Apart.

reCAPTCHA is a free service that protects a site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart.

Introducing reCAPTCHA v3

The 3rd version of Google’s reCAPTCHA was recently released. It does not have a user interface, also it is completely invisible. It helps us detect abusive traffic on our website. Instead of showing a CAPTCHA challenge, reCAPTCHA v3 returns a score so we can choose the most appropriate action for our website.

Implementation in Angular

Step-1: Register Google reCaptcha

Visit this link https://www.google.com/recaptcha/admin/create and register a new site like this:

Here we have to add a label of your choice, have to select reCAPTCHA v3, specify a domain. If you wanna try locally, add localhost domain. Accept terms & conditions and click on ‘Submit’ button.

We will get a secret key and site key. The site key is what we need to implement google recaptcha v3 in the frontend. And a secret key (keep it secret). This will be used for g-recaptcha’s frontend response verification on our backend.

Step-2: Load the JavaScript API with your sitekey.

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

Ste — 3: Install angular-recaptcha3 via npm

In your project add angular-recaptcha3 via command npm i angular-recaptcha3 — save

Step-4: Import ReCaptchaModule

Add ReCaptchaModule either in the app module or any specific module where you want to use this feature (register/login). In the forRoot() method mention the RECAPTCHA_OPTION. To know more about different options visit this link.

Syntax:

import { ReCaptchaModule } from 'angular-recaptcha3';

@NgModule({
    imports: [
        ReCaptchaModule.forRoot(RECAPTCHA_OPTION)
    ]
})

const RECAPTCHA_OPTION = {
    language?: string;
    invisible?: IRecaptchaOption;
    normal?: IRecaptchaOption;
}

interface IRecaptchaOption {
    sitekey: string;
    theme?: string;
    type?: string;
    tabindex?: number;
    badge?: string;
}

Example: I have added this in login module of my project. Added basic recaptcha options, you can modify them as above.

import { ReCaptchaModule } from 'angular-recaptcha3';

@NgModule({
    imports: [
        ReCaptchaModule.forRoot({
            invisible: {
                sitekey: 'your key', 
            },
            normal: {
                sitekey: 'your key', 
            },
            language: 'en'
        }),
    ]
})

Step-5: Insert the recaptcha in the template to initialize it

Recaptcha has different parameters, you can add according to your need: hide, sitekey, size, theme, type, tabindex, badge, language.

<recaptcha 
    [size]="'invisible'"
    [hide]="false" 
    (captchaResponse)="onCaptchaResponse($event)">
</recaptcha>

Step-6: Get the response token & perform action

a. Now either you can implement method onCaptchaResponse() mentioned above to get the response token or you can call recaptchaService.execute()

b. If you are implementing some button click, example login form’s submit button then you can call the service’s execute() method to get token.

import { ReCaptchaService } from 'angular-recaptcha3';

constructor(private recaptchaService: ReCaptchaService) { }

login() {
 this.recaptchaService.execute({action: ‘login’}).then(token => {
   // Backend verification method
   this.sendTokenToBackend(token);
 });
}

Step-7: Now recaptcha is activated !

Step-8: Verify recaptcha token on backend side

In backend code, we need to call this API to verify the response.
URL: https://www.google.com/recaptcha/api/siteverify
METHOD: POST

• If success true we can assume that the user is not a robot, and process whole request
• If not, return error.

In this way we can implement v3 of reCaptcha in Angular app.
Thanks for reading :)

References:

• https://developers.google.com/recaptcha/docs/v3
• https://www.npmjs.com/package/angular-recaptcha3

When we are looking at the JS program, we’re going to be looking at an execution context being created and run. Normally there is more than one execution context running during a JS program. The base execution context is the global execution context. When we talk about the word global, the thing that is accessible everywhere to everything in our code.

The global execution context creates two things for us:

1. Global Object
2. Special variable called — ‘this’

Now, let’s actually see it. Have created index.html file like this in any code editor:

And included an app.js file which is a blank JS file. Now I have run this index.html file in Google Chrome browser and opened the browser’s console & typed ‘this’ & pressed enter like this:

Here the JS file was loaded, the syntax parser started & realised there is nothing to parse as our JS file was empty. But because as we ran the file, JS engine started executing and the execution context was created. As we have seen above, as execution context is created, it will create 2 things from us — global object & ‘this’. So though our code was empty, JS engine decided what will be the value of this, and in this case it is the ‘window’ — The current window. Since we are running JS in the browser. So this window object is the current tab that we are on.

This is the global object inside the browser. If we use node.js this global object will be the different one. But there’s always a global object when we run JS.

Notice that we have these two values, global object & this even we did not write any actual code. And that is the JavaScript engine doing for us. At the global level those two things are equal.

Global: The code or variable aren’t inside a function is global.

Now, let’s check what will happen with some code. So have added one variable with some value assigned to it & one blank function like this:

After running this code: As we have seen execution context is created. Variable is not inside a function. When variables & functions are not inside any function in JS, those get attached to the global object.

If we type window.greet or simply greet in console, we get “Hello World!” values.

So when our variables and functions are lexically not sitting inside a function, they’re just sitting right there on a global object.

Summary

• When JavaScript code is executed, an execution context is created.
• At base level, when we are not inside a function, we have a global object that the JS engine creates for us as a part of the execution context.
• If we are running code inside a browser, the global object is the ‘window’ object. ‘this’ will be the ‘window’ object.

In the next article we will be continuing on the execution context and hoisting. Thank you!

The Global Object & Global Environment was originally published in JS Essentials on Medium, where people are continuing the conversation by highlighting and responding to this story.

Objects In Real Life

Just like any other programming languages, we can compare objects in real life. Let’s take an example of a car. There are different properties of a car like a car has a colour. It has a model, design, size, weight, engine etc.

So if we look at the properties of above car we can say that:
- The model of the car is Honda City
- The colour is red
- The engine is 1498 cc
- Transmission type is manual
- The seating capacity of the car is 5
- Fuel tank capacity is 40 L

Similarly objects in programming language have some properties and those properties have some value, like the model of the car is Honda City so property name is ‘model’ and value is ‘Honda City’.

Name — Value Pair

A name which maps to a unique value.

It means a name has some value. A pair which consists of name and value. The name may be defined more than once but only can have one value in any given execution context. The value may have another name/value pair.

Note: We will learn about execution context in detail in upcoming posts.

So in any particular execution context i.e. a section of a code that is running, a name can only exist and be defined with one value.

Example, firstName =Anjali, here name is ‘firstName’ and value is ‘Anjali’. This is the name-value pair.

Objects

When we are talking about objects, we can use this name-value pair concept to define them.

A collection of name-value pairs.

This is the simplex definition when talking about the objects.

student = {
    fName: 'John'
    lName: 'Doe'
    age: '15',
    address: {
        street: 'DP Rd',
        flatNo: '401',
        floor: 4
    }
}

Suppose we have a name as ‘student’ and the value is a collection of other name-value pairs. fname is a name & value is ‘John’. lName is a name, value is ‘Doe’. address is a name & value is a collection of other name-value pairs. This is an object in JS.

So when we are talking about objects, we are talking about collection of name-value pairs. We are not going into much details right now. We will cover everything step by step in upcoming articles.

I hope objects at basic level are cleared now. In the next article we are going to talk about global objects.

Thank you for reading :)

Objects in JavaScript was originally published in JS Essentials on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s first understand what is the meaning of the word ‘lexical’ ? Lexical is nothing but related to words or vocabulary of a language or grammar. A lexical environment is where something sits physically in the code we write. And that environment is created behind the scene. This is the logistic concept & we can’t actually access it from our JS code. Then why do we need to understand it ? Because whenever we are creating any function in JS, we have been creating a lexical environment along with it but we didn’t know it.

A Lexical environment is where something sits physically in the code we write.

Let’s take an example to understand it better. Suppose there is a function having one variable inside it.

 function greet() {
 var msg = “Hello World”;
}

We can say that variable ‘msg’ sits lexically inside the function. Just imagine physically where we are writing the code, there it sits. But if you read our last blog post about Syntax Parser, we said that our code is not actually given directly to the computer, but it translated into something the computer can understand.

But in programming language, ‘lexical environment’ is important, that means where we see things written gives us an idea of where it will actually sit in the computer’s memory. And how it will interact with other variables, functions and elements of the program. And that’s because the program, the compiler that is converting our code to those instructions cares about where we put things. It makes decisions that syntax parser going through everything makes decisions.

So when we talk about the lexical environment of something in the code we’re talking about where it’s written & what surrounds it. I hope this post helps to understand one of the the basic terms of JS. I will talk about ‘‘Execution Context’ in upcoming articles. Let me know if you have any queries in the comments section below or on my personal email address. Till that stay tuned ! Thank you for reading.

Lexical Environment was originally published in JS Essentials on Medium, where people are continuing the conversation by highlighting and responding to this story.

I have started this series because I just did a course from Udemy by Anthony Alicea, ‘JavaScript: Understanding the Weird Parts’. And he explained it very well right from scratch. You may go through this cource. Most parts I am taking from this course so that everyone can read & understand conceptwise, if do not have time to go through the whole course.

Let’s begin with one of the most basic and important concepts — Syntax Parser.

The program that reads our code and determines what it does and if it’s grammar is valid.

We write code and that code isn’t a magic that computers understand as we write. Computer is not a human being, it has it’s own language. Someone else wrote a program to translate it for the computer. When we write JavaScript code, it isn’t directly asking the computer what to do. Those details are hidden from us. Someone else or there is some other program which converts our JS code into something that the computer can understand.

We can take example of human translators, take a look at above example. If person ‘A’ understands only English and person ‘C’ understands only ‘German’, then how can they communicate ? Correct, through ‘translators’ (also known as interpreters) who understands both the languages. In computer language, those programs or translators are called ‘compilers’ & they also have to do with ‘interpreters’.

But those programs — interpreters & compilers do the process. They actually read our code character by character and determines if syntax is valid and then implements that syntax in a way the computer can understand.

Suppose we have our code & there is a program that is going to convert what we have written into a real set of computer instructions, something that hardware can physically understand.

If we look at the above example, here we have a JS function with a variable which is represented in the computer’s memory and which is being translated from what we are writing to what the computer can understand. There is a compiler or an interpreter between those two things & part of that is a syntax parser.

It is going through character by character like F-U-N-C-T-I-O-N and it says oh that’s a ‘function’, so there should be a space after this. And the next thing that it looks up until the parenthesis() will be the ‘name of the function’ etc. And that’s translated by the systems that someone else wrote. But it also means in the translation process, the programmers that wrote the compiler can choose to do extra stuff. Our code is not actually being given to the computer but the translation of it, so the engine that is interpreting our code can decide or choose to do other things also.

So that’s syntax parser, interpreter between our code and computer which translates our code into machine readable code. And it’s a part of the JavaScript engine that is actually running everytime we run our JS code.

I hope you enjoy the article with the basic concept of syntax parser. In the next article we are going to talk about lexical environment and execution context. Stay tuned!

Syntax Parser was originally published in JS Essentials on Medium, where people are continuing the conversation by highlighting and responding to this story.

Angular provides lots of features, and one of the most important feature is component reusability. To reuse the components we can use content projection or ng-content. Let’s understand how we can use <ng-content> to reuse the component and project the contents dynamically.

Let’s take a simple example. Suppose we have two forms as following:

We want this one to be a ‘Create User’ form & the other one to be a ‘Login’ form. And we just need a different form title and the button text for each of the forms with the same fields i.e ‘Email Address’ & ‘Password’. So it’s not a good practice to create two separate forms/components. Then using a single form/component how can we solve this problem ?

Here we can use content projection to change a piece of form. Let’s see how we can do this ? Look at the code below:

<auth-form (submitted)=”createUser($event)”></auth-form>

<auth-form (submitted)=”loginUser($event)”></auth-form>

For both Login and Create Account forms we are using the same selector of AuthFormComponent. If we look at the template code:

<form #form=”ngForm” (ngSubmit)=”onSubmit(form.value)”>
 <h3>My Form</h3>
 
 <div class=”form-group”>
  <label for=”email”>Email Address:</label>
  <input type=”text” class=”form-control” id=”email”>
 </div>

 <div class=”form-group”>
  <label for=”password”>Password:</label>
  <input type=”password” class=”form-control” id=”pwd”>
 </div>

 <button mat-button color=”success”>Save</button>
</form>

Using this code it will render the forms the same as above images. Now we want the title to be ‘Create Account’ for one form and ‘Login’ to another instead ‘My Form’. So this is where the content projection is useful. We need to pass pieces of information in between these component tags, like this:

<auth-form (submitted)="createUser($event)">
  <h3>Create Account</h3>
</auth-form>
<auth-form (submitted)="loginUser($event)">
  <h3>Login</h3>
</auth-form>

But if we do only this much part it’s not going to work. So what we need to actually do is, project the content through something called as ng-content. We need to replace form title which we are showing using <h3> tag in auth component with <ng-content> like this:

<form #form=”ngForm” (ngSubmit)=”onSubmit(form.value)”>
 <ng-content></ng-content>
 
 <div class=”form-group”>
  <label for=”email”>Email Address:</label>
  <input type=”text” class=”form-control” id=”email”>
 </div>

 <div class=”form-group”>
  <label for=”password”>Password:</label>
  <input type=”password” class=”form-control” id=”pwd”>
 </div>

 <button mat-button color=”success”>Save</button>
</form>

In the browser’s console we can see that the content has been projected inside our forms. See the below image for reference.

Ok! Now what if we have multiple contents to project dynamically within a single form?

Projection slots with ng-content

Now our next use case is we want to inject different buttons based on form. For example, we want button text as ‘Sign Up Free’ for create account form & ‘Login’ for login form instead of ‘Save’.

To do this we need to add a button like we did to show dynamic form title:

<auth-form (submitted)="createUser($event)">
  <h3>Create Account</h3>
  <button type="submit">Sign Up Free</button>
</auth-form>
<auth-form (submitted)="loginUser($event)">
  <h3>Login</h3>
  <button type="submit">Login</button>
</auth-form>

After doing above changes our forms look like:

Oops! Here we have dynamic buttons as per our need but the placement of buttons are wrong. How can we fix this issue ? So the answer is using content projection slots. It tells us where to inject each particular piece of information.

Let’s see how we can do this. First we will remove the extra button ‘Save’ which we can see at the bottom & this is from our common auth component. And instead at that place we can add another ng-content tag to display our buttons at the bottom. Now the way to know which ng-content is for which selector is, using a ‘select’ attribute. Syntax for this is, select=“<tag_name>”.

Check the code below how we can do this:

<form #form=”ngForm” (ngSubmit)=”onSubmit(form.value)”>
 <ng-content select=”h3"></ng-content>
 <div class=”form-group” style=”padding-top: 20px;”>
 <label style=”font-weight: 500;” for=”alterEgo”>Email Address:</label>
 <input type=”text” class=”form-control” id=”alterEgo”>
 </div>

<div class=”form-group”>
 <label style=”font-weight: 500;” for=”alterEgo”>Password:</label>
 <input type=”text” class=”form-control” id=”alterEgo”>
 </div>

<ng-content select=”button”></ng-content>
</form>

And doing above changes our forms look like this:

This works similar to a document query selector. Instead of tag-name to select, we can also pass CSS class or id name like this: select=“.class_name” or select=“#id_name”.

Note: <ng-content> does not produce a content, it simply projects existing content.

I hope you enjoyed this article. If you have any queries, you can ask me in the comments section below. Thank You !

RxJs is a library that brings the concept of “reactive programming” to the web. With Reactive Extension of JavaScript i.e. RxJS, we leverage patterns to collect data from multiple sources. Combine data for display, cache data to improve performance and react to the user.

Reactive extensions were originally developed by Microsoft as Rx.Net. Since that time, the reactive extension library has been implemented for several other languages including Java(RxJava), Python(RxPy), Ruby(Rx.rb), JavaScript(RxJS).

What is RxJS ?

According to rxjs.dev,

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

But what does it mean ?

Imagine RxJS as, “Manage the incoming data as it flows through time” i.e. the streams. stream is nothing but a sequence of data elements made available over time. It can be thought of as flow of data being processed one at a time rather than in chunks.

Imagine a stream as a conveyor belt let’s say in a bottle factory, each bottle being processed one at a time rather than in large batches.

The data can be of any type such as numbers, strings, or an array of employees or messages or can be a response returned from an HTTP request. The stream can come from user input such as mouse or keyboard events. We can use RxJS, “to manage a stream of any data”.

RxJS Terms

Observer / Subscriber:

Imagine an observer as an employee in a factory who is observing the bottle as they are emitted onto a conveyor belt. So as an observer, employee get notification as:

• The next bottle comes so that he can process it in whatever way he wants.
  [ next item process it: next() ]
• If some bottle has a defect [ error occurred, handle it: error() ]
• When all bottles has been completed [ complete, you’re done: complete() ]

So RxJS observer observes the stream, & responds to it’s notification.
From Angular documentation observer is,

A JavaScript object that defines the handlers for the notifications you receive.

Basically in RxJS, observer is also defined as an interface with next(), error() and complete() methods. One such class that implements an observer interface is Subscriber. In RxJS, each observer converted into a subscriber.
A subscriber is an observer with additional features to unsubscribe from an observable.
Let’s see how observable looks like :

const observer = {
 next: bottle => console.log(`Bottle is emitted ${bottle}`);
 error: err => console.log(`Error occurred: ${err}`);
 complete: () => console.log(`No more bottles. Goodbye for the day!`);
};

Observable / Observable Stream

Referring to the above images, our stream is a bottle moving along the conveyor. In RxJS, a stream of data is called an observable stream. Also called an ‘observable sequence’ or just an ‘observable’ or ‘stream’. Observables can emit finite/infinite numbers of values.

Observables can be:

• Synchronous — items are emitted to the stream immediately
• Asynchronous — items are emitted at some future point in time

We can create observables using the ‘new’ keyword.

const bottleStream = new Observable (bottleObserver => {
 bottleObserver.next(‘bottle 1’); 
 bottleObserver.next(‘bottle 2’);
 bottleObserver.complete();
});

Using the above example to understand the concepts. Normally we do not write code like this. There are easier ways to create observable streams.

Will the above code emit two bottle strings to our streams ? Well the answer is NO. Observables are lazy, and don’t execute when they are defined. So guys what’s missing here ? Yes, we have not started the stream. We start the stream by calling the subscribe() method of the observable.

We must subscribe to the observable to start a stream otherwise, no values are emitted. Like this:

const sub = bottleStream.subscribe(observer);

When we subscribe we pass, in the observer to monitor that subscription & react each time an item is emitted. subscribe() method returns a subscription, which represents the execution of the observable.

Let’s see how it’s executed ?

1. As we have subscribed to the observable, code in the constructor gets executed.
2. It first calls next() on the observer, displaying the next method message in the console.
3. It calls next() again, displaying a second message in the console.
4. Lastly it calls the complete() method, stopping our stream and displaying our complete message.

When working with observables we don’t normally create an observer like above, and pass it into the subscribe method. Rather we pass the next, error and complete methods, directly into the subscribe method like this:

const sub = bottleStream.subscribe({
 next: bottle => console.log(`Bottle is emitted ${bottle}`);
 error: err => console.log(`Error occurred: ${err}`);
 complete: () => console.log(`No more bottles. Goodbye for the day!`);
});

Each of the arguments to the observer i.e. next, error, complete are optional, only specify what is needed.

Stop the stream:

Now, in a bottle factory at the end of day, what happens if users do not stop the conveyor belt ? Well bottles get spread everywhere in factories. Similarly if we do not stop the RxJS stream, (like we stopped above using complete method) it will create memory leak issues. There are multiple ways to stop the stream:

• Call observer’s complete() method.
• Use completing operators like : of(), from().
• If an observer throws an error, the stream will stop automatically.
• By unsubscribing the subscription using unsubscribe method: sub.unsubscribe();

Creating observables:

In Angular we often work with observables, which Angular creates for us. But sometimes we want to create one ourselves. We can create observables by using an observable constructor using the new keyword that we have seen above. But RxJS provides simple functions for us to create observables they are:

• of(): Creates an observable using a set of defined values.
  const bottleStream = of(‘bottle1’, ‘bottle2’);
• from(): creates an observable from an array/other data structure.
  const bottleStream = from([‘bottle1’, ‘bottle2’]);
• fromEvent(): Creates an observable with any DOM event.
  const source = fromEvent(document, ‘click’);

These commonly used creation functions are static and we can call them without object. There are some more creation functions available in RxJS.

I hope you have understood the important terms of RxJS. Now moving forward to the RxJS operators.

Operators

Operators are nothing but functions. In RxJS, we pipe each emitted item through a set of operators. The operators can transform, filter, or process the item. We also use operators to compose streams. We can apply multiple operators in sequence using the observable pipe method.

Take a look at the example below! There is an observable stream of three numbers including 3, 2 and 4 which is our source observable.

of(3, 2, 4).pipe(
 map(val => val * 2),
 tap(val => console.log(val)),
 take(2)
).subscribe(console.log);

pipe():

We have called the pipe() method of the observable and pass different RxJS operators like map, tap and take to it separated by commas. Now when we subscribe to the source observable, the source observable stream starts emitting the items. Each operator pipes through the series of operators in sequence.

Here first 3 will be emitted and processed through each operator, then 2 and then 4. The value output by the last operator is the value emitted to the result observable and processed by the observable’s next() method which we pass to the subscribe.

When we subscribe to an observable with operators, each operator takes an observable as an input, the operator subscribes to that input observable and creates, processes and returns an output observable. Now that output observable will be the input observable for the next operator in sequence. We can think theses operators as a pipeline.

Let’s move on to the operators that we have used in our pipe to solve this example.

map():

This is the most commonly used operator in RxJS. map transforms or changes each emitted item as defined by a function we provide, hence it is called as a transformation operator. Here in our example, we map/transforms each emitted item to two times it’s value. For each item in the source, exactly one mapped item is emitted.

Used for: Making changes to each item in the source stream.

tap():

The purpose of the tap operator is to perform an operation that does not affect the stream. Formally, tap is a utility operator. If we aren’t getting the results that we expect, then we can use a tap operator to debug the issue. For tap, input observable is the same as output observable.

Used for:

1. Debugging
2. Performing actions outside the flow of data that don’t modify the stream.

take():

The take operator emits specified number of items. It is a filtering operator. When an item is emitted, take counts the item. If the count ≤ specified number, it emits the output stream. When it equals to the specified number, it completes the stream.

Used for:

1. Taking a specified numbers of items.
2. Limiting unlimited streams such as streams created by an ‘interval’ function.

I hope you understand these operators, Now, let’s execute our example.
Our source observable stream contains 3 numbers: 3, 2 and 4 respectively.

1. map: First 3 will be emitted and pass it to map function: 3 * 2 = 6.
2. tap: The first tap logs it to the console. // 6
3. take: will taken it as first time
4. subscribe: logs 6 to the console. // 6
5. map: Secondly 2 will be emitted, so 2 * 2 = 4.
6. tap: The second tap logs it to the console. // 4
7. take: will taken it as second time
8. subscribe: logs 4 to the console. // 4

As we have provided ‘ 2’ as an argument to take. So it will emit at most two values and stream will be stopped and no 3rd value will be emitted i.e. 4.

So final output of our example will be:

of(3, 2, 4).pipe(
 map(val => val * 2),
 tap(val => console.log(val)),
 take(2)
).subscribe(console.log);

Output:
6
6
4
4

There are about 100+ built-in RxJS operators. It takes time to learn what they all do and how they can be used. Now let’s see how to handle errors with observables.

Error Handling

While working with observables it’s important to catch the errors. If there is an error, any stream will be stopped and no more values can emit. There are two strategies to handle the errors with observables. In both strategies, the first step is to catch the error that brings us to the next() operator.

1. Catch and Replace
2. Catch and Rethrow

Catch and Replace:

It involves catching the error & replacing errored observable with a new observable. Replacement of errored observable depends on the error and observable. We could return hard-coded data or locally stored data or empty array/value as a replaced observable when error comes using catchError().

catchError():
Catches an error that occurred on observable. Here we catch the error & pass in a handleError method for processing the error.
catchError(this.handleError);

catchError is useful to rethrow the error or replacing the errored observable so that we can continue the stream even after error occurs.

const http$ = this.http.get<Bottle[]>(‘/api/bottlesDetail’);
http$
 .pipe(
   catchError(err => of([{id: 1, material: 'glass', color: 'red'}])
 .subscribe(
   res => console.log(‘HTTP response’, res),
   err => console.log(‘HTTP Error’, err),
   () => console.log(‘HTTP request completed.’)
 );

When the error occurs, catchError operator is going to take error, unsubscribes from the input stream and return an observable which is an array of a bottle object, using of operator. The observer does not get notified of the error as catchError already handled the error. Instead observable’s next method will call with the new observable from catchError operator.

Catch and Rethrow:

In this mechanism, we rethrow the error caught by the catchError using ‘throwError’. throwError creates an observable that never emits any value. Instead, it errors out immediately using the error caught by catchError.

const http$this.http.get<Bottle[]>('/api/bottlesDetail');

http$
    .pipe(
        map(res => res['payload']),
        catchError(err => {
            console.log('caught mapping error and rethrowing', err);
            return throwError(err);
        })
    )

Here, we rethrow an error from catchError. This is how we can handle errors in RxJs.

I hope that you have enjoyed this post on RxJS terms, operators and how to handle errors. Also, if you have some questions or comments please let me know in the comments. Thank you!

References:

• https://rxjs.dev/
• RxJS in Angular: Reactive Development
• https://en.wikipedia.org/wiki/Reactive_extensions
• https://www.udemy.com/course/rxjs-course/