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. …
Explaining a scenario where session storage gets copied over from one tab to another
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.
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.
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 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
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.
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.
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.
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.
Let’s first discuss each method in detail.
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. …
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.