Explaining a scenario where session storage gets copied over from one tab to another

Background:

In this modern era of web-app development, the need for storage on client-side has increased and there are many types of storages available on client-side now with session storage being one of them. The session storage is best suitable for cases where data should only be confined to the tab that the app is running. But there is one case, where the session storage gets copied over from one tab to another tab which we will talk about in this article.

Session storage — Background:

From MDN docs: The sessionStorage…

Explaining how Angular handles elements that have a directive instantiated more than once

Directives in Angular come handy when we want to transform or tweak appearance of an element. Also, using directives is better for abstraction as all the implementation logic is abstracted out in the directive implementation and can be used these on any number of elements just by adding the directive selectors along with inputs if there are any.

In this article, I am going to explain a scenario where a directive is used more than once on an element and how Angular handle such cases.

As usual…

Explaining why Renderer.setValue method doesn’t work the way you think

It is quite common that we run into cases where we need to update value/textContent on a native element while building components/directives in Angular. This can be done in many ways but the Angular’s suggested way is to use Renderer API.

Renderer has many methods and one of such methods is Renderer's setValue method. This actually made me so confused as it doesn’t work on all types of elements. …

Going through source code to figure out how it works

Angular pipes are best suitable for transforming/formatting data

Angular has some in-built pipes along with giving us a way to build custom pipes. One of the in-built pipes is JsonPipe. In this article, I would like to walk you through the implementation of this simple JsonPipe.

With no further wait, let’s get into the source code:

Life-cycle hooks in general gives us a way to run our code at a specific point of time during it’s life-cycle.

When it comes to Angular components, these life-cycle hooks are very helpful for developing complex components, directives efficiently. But, have you ever-thought what are all the life cycle methods that an Angular service supports? If you don’t know that, then this article is for you.

Some Background on Angular services’ dependency injection:

Dependency injection is a nice way to reuse the same instances across the app or create an instance for a specified scope. Angular in build has this capability to manage and provide the services…

Explaining how life-cycle methods gets called when a component class extends another.

Inheritance is one of the best ways to reuse code. With inheritance we can move common methods, properties to a new class which can be reused in any number of instances just by extending it.

Inheritance with Angular components:

Component classes are just classes with decorators. The decorators provide metadata which Angular uses to build the component instance and inject requested services in constructor through dependency injection at runtime.
So, can we extend one component class from another? Yes, but there are some gotchas which we are going to talk-through now.

Some Background on Angular compilation and change detection process:

Let’s…

Most front end applications make API calls to perform CRUD operations and the number of those endpoints often grow as we build the application. So, how to manage those endpoints in a better way? Here is one of such ways.

Let’s start with a simple example. In this case, I am using a simple angular service but this approach can be used with any front-end framework or library.

When it comes to find the presence of an element in an array in JavaScript, there are several different ways. And that bring next question of what to use and which performs better. In this article, I am going to list out all the seven different ways along with some test runs to see which comes to top of the list.

Seven different ways:

Let’s first discuss each method in detail.

1. Array.indexOf method

The Array.indexOf takes in an element and an optional start-from-index. When the start-from-index is passed in, the algorithm looks for the element starting from that index. …