Image for post
Image for post
Photo by Joshua Aragon on Unsplash

A use case for JavaScript symbols in React applications

One feature that was part of ES6 release was Symbol data structure — but many developers are not aware of its use cases in application code. In this article, I am going to talk through a scenario where I felt Symbol can be a best fit.

Recently, I was working on a feature where we had nested form components that need to be reset or validated from parent component. …

Image for post
Image for post
Photo by Chien Nguyen Minh on Unsplash

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

Image for post
Image for post
Photo by Emily Morter on Unsplash

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…

Image for post
Image for post
Photo by Artem Verbo on Unsplash

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. …

Image for post
Image for post
Photo by Samuel Sianipar on Unsplash

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:

Image for post
Image for post
Photo by Brad Helmink on Unsplash

Finding out what are all the Angular life-cycle methods that get called in an Angular service.

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…

Image for post
Image for post
Photo by Robert Ruggiero on Unsplash

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…

Image for post
Image for post
Photo by Oscar Nilsson on Unsplash

Organizing end points in an any application makes it easy to maintain them in long run

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.

Image for post
Image for post
Image credit

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. …

Image for post
Image for post
Photo by Niels Steeman on Unsplash

Forms in general have a need in almost all applications to handle user inputs and currency is one of them. With the emerging UX design, ways to make currency inputs interactive and easy-to-use have changed a lot.

Many people, I think, agree that currency inputs are one of the hard things to develop amongst the others. In Angular, directives come in handy to implement such feature as it is easy to change the behavior and appearance of the element is easier. In this article, I want to walk through the step-by-step process of how I built a custom directive, currency-formatter.

Konda Reddy Yaramala

Software Engineer | Writing about things one at a time | Let’s connect: https://www.linkedin.com/in/konda-reddy-y-50ba71157/ | Follow me on Medium!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store