Forem: Sabyasachi D Maven

Dive into JavaScript Closures.

Sabyasachi D Maven — Tue, 27 Dec 2022 04:07:57 +0000

The closure is one of the most important concepts alongside a confusing keyword in the world of javascript.

The closure is created every time a function gets created at function creation time.
It gives access to an outer function from the inner function.

Let's try to dive into the concept and understand what exactly are closures and where it comes into play.

The definition of MDN, says "A closure is the combination of a function and the lexical environment within which that function was declared."

Closure is when a function can remember and access its lexical scope even when it's invoked outside its lexical scope.

Here, we need to understand the "lexical scope".

Lexical scope states how a variable name is resolved within nested functions.

Let's outline a basic closure.

outerFunc() creates a local variable called outer and a function called innerFunc(). The innerFunc() the function is an inner function that is defined inside outerFunc() and is available only within the body of the outerFunc() function. Note that the innerFunc() function has no local variables of its own.

However, since inner functions have access to the variables of outer functions, innerFunc() can access the variable outer declared in the parent function, outerFunc().

This is an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. The word lexical refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available.

In some programming languages, the local variables within a function exist for just the duration of that function's execution. Once outerFunc() finishes executing, you might expect that the outer variable would no longer be accessible.

However, because the code still works as expected, this is obviously not the case in JavaScript.

The reason is that JavaScript creates a "Closure". In the above case, myFunc is a reference to the instance of the innerFunc that is created when the myFunc gets executed.
The instance of innerFunc maintains a reference to its lexical environment, within which the variable name "outer" exists. For this due reason, when the myFunc is invoked, the variable "outer" remains available for use.

Let's take a slightly more complex example.

Can you guess what's going on with this code?

When you are trying to invoke the add5() method, it has reference to the anonymous function which accepts an argument "y" but makeAdder() accepts an argument "x". So, how this lexical scope is getting created.

Let's understand this.

If you see the add5() and add10() method creates a closure.

If you try to console the add5 method, it will display as below.

function(y) {
  window.runnerWindow.proxyConsole.log(y)
  return x + y;
}

The anonymous function still holds the value of "x" in the outer scope created from closure.

I hope by this point, you might have started making sense of how tricky the concept of "Closures" is but at the same time it is also interesting.

Let's talk about the most common mistakes, developers make while understanding the closures.

We will take a most asked interview questions on the concept of "Closures", i.e. the canonical for loop example.

At the first glance, if you are learning "Closures" for the first time, most of the answers you will get are like.

But, what actually you will get is like.

Now, the point here to ponder is Why? Let's talk about a few possible solutions.

Using the "let" keyword.

Using the let keyword, every closure binds the block-scoped variable, meaning that no additional closures are required.

Using the "IIFE".

If you see, we are using an IIFE function that takes an argument "index" which holds the current value of "i" at every iteration.
Closely analyzing the IIFE block, the setTimeout() function holds the value of "index" even after it has been executed which was created using a "closure".

That is the magic of using a "Closure".

Returning a "function" just like a "closure".

If you understand the above example, the solution here is self-explanatory, the setTimeout() function holds the current value at every iteration. As we are returning a function with IIFE too, it prints the desired output.

Let's take another example of Closure.

I guess, now you would be able to make what should be the output?

If you answer is above, then let's understand what's going on?
If your answer is 1,2,3,4. I guess, you are on the right track.

So, let's try to understand what's going in the code block.

Always remember this point.

Closures - It is created when functions are created, not when they are invoked.

Let's see when we are invoking the getItems0 on line # 13, let's start executing the code block.

An empty array is initialized on line #2.

Then the for loop on the line #3, variable "i" is hoisted. In other words, the "i" variable is declared outside of the for loop, and the variable is then mutated during each iteration.

For each iteration, we're pushing an anonymous function to the array. You can push a value, an object or a function to an array. If we pushed i to the array, we would push the value of i at the time of iteration to the array.

As we are pushing an anonymous function to the array, the anonymous function will return the value of "i" at the time of invocation. At the time of the invocation, the loop would have already run.

By the time the loop completes, "i" will be equal to 5 because of the way that the increment expression in a for loop works.

The only left out question is how can each anonymous function in the getItems array can access the value of i at each iteration?

The definite answer is to bind the value of "i" at each iteration and that too at the creation time and not the invocation time ???

Think about what's happening when we execute the anonymous function.

We're invoking an anonymous function from the global scope.
addItems on line 1 is an outer function that returns a bunch of inner functions, because the items array that is returned contains a bunch of anonymous functions that are essentially an array of inner functions in the addItems function
Each of these inner functions in the items array is accessing the i variable which is in the addItems function scope
At the time that each inner function is invoked, the addItems function no longer exists, yet each of the inner functions maintains access to the i variable that is in the addItems scope

So, all the above conditions for a closure have been met.

Now, only part left is to uniquely bind the "i" variable at each iteration.

We can solve using "let" keyword and IIFE.

Using "let" keyword.

Using "IIFE"

By wrapping each items.push in an IIFE, we are ensuring that the j variable is privately scoped to this function, and as a result, the j variable will have a unique binding for each iteration.

I hope the above examples will help you a lot in understanding the "Closures".

Two important characteristics of determining a Closure.

An outer wrapping function is invoked, to create the enclosing scope.
The return value of the wrapping function must include reference to at least one inner function that then has closure over the private inner scope of the wrapper.

Let's see some practical use of the "Closures".

Encapsulation - Emulating private methods
Common web examples like "Adding buttons to a page to adjust the text size".
Module pattern and Revealing Module pattern
Closures can be used to make functions more memory efficient and performant - for example, ensure that a large array/object is only initialized once.
Closures are the fundamental concept of the functional programming. HOF, currying is not possible without closures.
Init functions - closures can be used to ensure that a function is only called once.

I hope this article might have cleared most of the misconceptions around "closure". If you really like the article, please follow me.
Happy coding. Keep learning. Keep exploring.

Angular: core.ts in detail

Sabyasachi D Maven — Sat, 11 Jul 2020 21:51:06 +0000

I was working on a feature module with deep nested components. And I need to improve the rendering of the component.

So, I thought let's start debugging. I had idea about how the change detection works in Angular but was not sure from where this keywords comes like changeDetection, Input, Output, providers, host, selector, entrycomponents, encapsulation, etc.., I then found the definition for all these keywords which we use in our angular components is present in core.ts.

A very common question asked What exactly is the difference between a Component and a Directive?

In a nutshell: ** A component is a self contained directive with the template in it.**

We will try to demystify to make it more sense.

Let's see the directive declaration in core.ts

Basically, a directive is an interface with props like inputs, providers, selector, etc.**. So, this is what we try to use when we create a Component decorator.

Now, if we look at the component declaration, which looks like as shown in the image below:

If we see the component declaration, we see the it extends the Directive interface (but properties are optional), it solely depends on the user which properties the user wants to use.

So, our component declaration has template (inline html) or templateUrl (used as an external html file). Same goes with the styles (inline styles) and styleUrls (external css file).

Next, comes the encapsulation property which is nothing but a enum called ViewEncapsulation. Attached is the image for the same.

Then comes the changeDetection which type is also an enum called ChangeDetectionStrategy. Attached is the image for the same.

The change detection itself a separate topic which is outside the context of this article.

One important thing to note that if you see the definition of the Component, the view and component is different, they are not exactly the same.

The entrycomponents property we try to deal with dynamic component which will mostly called from the feature module. (you can call directly from the component from Angular 9 Ivy), but entrycomponents property is now obsolete if you have upgraded your application to Angular version 9.0 or higher.

I hope, next time if somebody asks you the question

Let's dig in further..

Have you ever wondered what goes behind the decorator like Component, Input and Output?

Decorator in a angular is a keyword appended with @ like @Component, @Input, @Output, @Pipe, @Directive, etc....

Let's see the definition of few decorators like Component, Input and Output (most used).

If we see the Angular component change detection is uses Default which means if there is any change in the input, or browser events, it runs the entire change detection cycle. Attached is the image for the same.

Component

I hope, it might makes sense of the things of the decorators usage in the day to day web development in Angular.

Let's move on further to see what core.ts serves for us.

Now, let's see the Input and Output decorator property.

Input

Output

The Input and Output decorator is used for the parent child communication between the components. A good practice when you have few components within your module. Else, it is advisable to use the RxJS Subjects like (BehaviorSubjects, ReplaySubject, AsyncSubject, Subject).

We generally have used the HostBinding and HostListener as a directive to listen to some events and react to it. Have you ever wondered what it contains under the hood.

HostBinding & HostListener

We use the @HostBinding decorator to bind some property around the element. Let's say a border style, background-color, etc..

Once, the binding is done, then we think on the event that binding should be done, where the @HostListener decorator comes into the picture. Attached is the image on how we use the host binding and host listener.

Moving further, let's see the @Pipe decorator.

Pipe

The pipe decorator is used for applying a transformation to the input value received. It has two property called the name and pure.

The pure is of type boolean. It can be thought like a pure and impure function. Same it applies to the Angular.

Pure Function:
Input parameters value determine the output. It's like on every same input, we get same output. The result can be shared across without the result be unchanged.

Impure:
The same guarantee cannot be provided in the case of impure function. The internal state can be changed from outside and that is why we cannot share it across.

Let's move on..

NgModule

We all have used the root module or the feature module, but have you seen, what all the module offers within.

If we see the NgModule declaration, we have providers prop for injecting the services, directives.

The declarations property, we use for the components addition.

The entrycomponents property can be used at the component level or the module level when trying to deal with the dynamic components in angular.

Now, the injectable services. Let's see what it contains under the hood.

Services

The povidedIn prop, where we want to inject this service. It has three values.

'root' : The application-level injector in most apps. The service has only instance throughout the application.
'platform' : A special singleton platform injector shared by all applications on the page.
'any' : Provides a unique instance in each lazy loaded module while all eagerly loaded modules share one instance.

Let's see the other props like useClass, useExisting, etc.

The providers prop has two property called provide and the useClass. If we have same name, the providers acts like a shorthand.
Then, the question is when we can we use the useClass or useExisting.

We know that different classes can provide the same service. Let's see the example.

The image description is self explanatory.

Let's suppose an old component depends upon the OldLogger class. OldLogger has the same interface as NewLogger, but for some reason you can't update the old component to use it.

When the old component logs a message with OldLogger, you want the singleton instance of NewLogger to handle it instead. In this case, the dependency injector should inject that singleton instance when a component asks for either the new or the old logger. OldLogger should be an alias for NewLogger.

If you try to alias OldLogger to NewLogger with useClass, you end up with two different NewLogger instances in your app.

To avoid, two instances, we can the useExisting prop.

We all have used the viewchild or contentchild for the DOM manipulation as using as reference on the html element and use it.

If you see the ViewChild uses the Query interface, it take a single element reference but if you want to use multiple reference, we use ViewChildren.

I hope, you might know few more details about the core.ts in angular the purpose it serves.

There are many areas to learn. I have just covered the few which is mostly used in our day to day development with Angular.

Happy coding. Keep learning. Keep exploring. 😊

Angular + RxJS: From Pull to Push Based Strategy

Sabyasachi D Maven — Mon, 06 Jul 2020 20:05:14 +0000

Today, we will try to explore the shift we can make from pull based strategy towards the push based strategy.

In the nutshell, we will see how we can minimize the use of explicit subscription as much as possible.

The overhead of using the subscribe method is to unsubscribe explicitly in comparison to the async keyword which takes care of the unsubscription automatically.

We will kick-start with a simple component fetching the list of users and binding it to the dropdown.

Let's do it then....

For the sake of this article, we will be using the jsonplaceholder fake api. If we want to play around with the code, please visit this link https://jsonplaceholder.typicode.com/

Pull based strategy

First, create a user model.

The model is the same as present in the api (https://jsonplaceholder.typicode.com/users)

The second step, we will create a user service.

Let's try to render the data on the UI. So, our user component ts file will look something like this..

Let's stop and figure out the code in the user component ts file.

We are invoking a user service and passing the id on user selection drop-down which will fetch the user details.

Secondly, on every drop-down selection, we are adding it to the subscription that we can later unsubscribe to avoid from the memory leaks.

This is where an extra overhead is required whenever you are trying to subscribe explicitly.

Let's move on to see the user component html file where we trying to loop and display the data.

With the above approach, every time we are trying to change the user from the drop-down, we are relying on the change detection and in turn which pulls the data based on the user id provided to the api.

If, we analyze, this approach has some limitations. I won't say the drawback which would in turn sounds like a negative connotation.

So, think what could be those limitations.. 🤔🤔🤔🤔

1. It will always rely on the default strategy of Angular change detection cycle.
2. Secondly, we cannot convert it to the Push based strategy if the particular user data is required by some other component.
3. If the user response needs some transformation, we are doing to on every user selection. Thinking from the performance perspective, we can create a memoized function and get the data.

The above approach which we had elucidated is basically called the pull based strategy.

Push based strategy
Let's make a shift slowly towards the Push based strategy and will see the changes as the article progress.
Basically, in a simple term, you can understand that if any data gets changed, we need to notified, if I am subscribed to it.

Let's start making changes with the user service.

Here, we are replacing the user property to a user subject (type: BehaviorSubject) and keeping it as private.

So, instead of exposing the userSubject, we are trying to expose a user observable as readonly so that value cannot be changed after initialization.

If we observe the loadUser method, whenever the new id is updated, the api is called and the user details is passed to subject. Whichever component wants to use the user details, can subscribe to details and use the data.

If we see, we are now moving from the limitation phase to expansion phase.

As, we had seen this article, our intention is to minimize the explicit subscription.

So, if we see the loadUser method in the user service. There is still some room of improvisation.

With the above implementation, I simply push the selected user id into the private user subject which acts as the source stream into the user$ observable. Every time a user’s id changes, a new http request is made.

The output with this approach remains the same. So, the updated user component html will look as shown in below image.

Overall, if we see, we have removed the explicit subscription from the user service.

Note: shareReplay function is used for multi-casting.

So, the intent was to move from the traditional pull based strategy which is more sort of imperative style to the push based strategy which is more sort of reactive style.

I hope it makes sense about using the #angular observables using rxjs in more reactive way.
Feel free to play around with this approach with some other scenarios.

Also, please add comments or feedback about this article.

Happy coding. Keep learning. Keep exploring. 😊

Angular: Debug Expression Changed Checked Error

Sabyasachi D Maven — Sat, 04 Jul 2020 19:54:23 +0000

I hope, most of the Angular developers out there sometime has faced the error "ExpressionChangedAfterItHasBeenCheckedError".
But, have you wondered why?

Let's try to demystify it out.

The most obvious reason when you are trying to update any input property from the parent (top) component to the child (inner) component, you receive this error once the view (inner component) is initialized.

First, let's see the error details on the console.

Let's closely look at the error, it says when the component was loaded, the previous value was "null: Best wishes from Dad!!" but after the check the value got updated to "null: Got the Best wishes from Dad!!"

So, what's happening in the background.

Let's start with two simple component as shown in the diagram below:

In the app component html file, we are trying to pass the input property message with the value "Best wishes from Dad!!".

Now, let's see what's going on in the child component ts file and html file.

In the ts file, we are trying to update the input message property as "Got the Best wishes from Dad!!".

Let's go and debug the error in the console. If we see the error in the console..

If we try to get to the file which is view.ts, we will see the method as shown in the below diagram that contains the view definition after being initialized.

If, you see the value of message property in the app component which is Best wishes from Dad!!.
After the child component is initialized, we will see the the value of message property in the child component which is Got the Best wished from Dad!!

Also, if you notice the oldValues property is also not getting updated in both of the component view details.

So, this where the error is popped up when the check is done among the previous value and current value in the error ts file under the viewDebug method as shown in the below diagram.

So, now comes what are the ways to deal with this problem. There may be few but most important we will try to see the 3 ways.

1. setTimeout function.
2. Triggering change detection manually.
3. asyncscheduler.

Let's make the changes with each of the aforementioned ways and check it's output.

1. code change with the setTimeout implementation in the child component.

2. code change with the manual change detection implementation in the child component.

3. code change with the asyncscheduler implementation in the child component.

Note: asyncscheduler uses the setTimeout under the hood.

So, if we debug with any of the above 3 options, you will get this view details as shown in the below diagram.

Feel free to play around with the code and dig more about such #angular errors.

I hope it makes sense about the #angular change detection.
Happy coding. Keep learning. Keep exploring. 😊

RxJS Operators: distinctUntilChanged & distinctUntilKeyChanged

Sabyasachi D Maven — Sat, 04 Jul 2020 17:47:35 +0000

As per the official doc, RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

While performing the input search by keyword, we generally use the distinctUntilChanged operator.

Today, we will try to explore both of the rxjs operators.

Going by the official definition:
distinctUntilChanged: It returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.

The sequence diagram for the distinctUntilChanged is attached below:

If we have a look at the compare function, it compares the distinct item from previous item from the source.

Also, we skip the compare function, it does the equality check by default. (applies to distinctUntilChanged && distinctUntilKeyChanged)

If we are trying to compare for the primitive values, we will consider the distinctUntilChanged operator. See the example below:

Now, let's try to do some variations with the custom objects.

If we see the example, we are trying to compare with "username" property, if it's distinct, we will take the value, otherwise it will be skipped.

Let's move on to the different flavor, which is distinctUntilKeyChanged

distinctUntilKeyChanged: Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item, using a property accessed by using the key provided to check if the two items are distinct.

The sequence diagram for the distinctUntilKeyChanged is attached below:

If we have a look at the compare function, it compares the distinct item from previous item from the source.

If we see the example, we are trying to compare with "username" property. But, here we trying to just pass the key directly and get the same output. Here, we write less code. If it's distinct, we will take the value, otherwise it will be skipped.

If, we want to try out more examples, we can try to play-around with the code.

We can use these two operators based on the usage. But, common is the input search keyword.

I hope this article have given some sense about the RxJS operators.
Happy coding. Keep learning. Keep exploring. 😊

JavaScript: Revealing Module Pattern

Sabyasachi D Maven — Tue, 19 May 2020 17:21:27 +0000

Let’s understand a bit of the theory behind the module pattern and the purpose it serves on implementing this pattern.

The Module pattern was originally defined as a way to provide both private and public encapsulation for classes.

It is further used to out-vie the concept of the classes by including the private and public properties/methods and variables inside a single object, thus encapsulating the underlying details (either implementation details, properties, variables, etc.) from the global scope.

If we try to summarize the gist of the Module pattern, it serves the below purposes:
Code encapsulation
Data privacy
Let’s move on to understand the pattern with the help of code.

The first step is to create a module.

The next step is to create a public method to our module so that the user can invoke this public method. For exposing the method, we will return an object with the methods defined.

If we try to execute the above method, we will see that we get the output from the public method being exposed to our calcOrderModule. Otherwise, if we try to execute the private property or methods from the module function, we get undefined. Just to make a small identification change, the private property or the method starts with the underscore sign(_).

Just to recapitulate, we have performed 3 steps:
Create a module using an IIFE.
Create a private property and a private method.
Create a public method to be exposed outside our module.

So until now we have covered the basics of the Module pattern. Let’s move on with the Revealing module pattern.

The way of implementing the module pattern and the revealing module pattern is almost similar with the only difference is that the latter returns the object while exposing the public method from our module.

Sidenote: A module pattern is similar to factory functions as we create an object without the nuances of using the “new” keyword.

Without further delay, we will try to implement the code using the revealing module pattern and later will emphasize what’s going on with the code snippet.

Let’s try to add a few more private properties and the private methods to our existing module.

So, we have declared a few private properties and 2 private methods to calculate the discount on the shopping cart item list.

This method will give us the count of the items and the price if any items from the list have any discount applied to it.

This is our final method which will return an object for us with the total count and the total order value.

Finally, the public method which we return from our module will invoke the above method.

The above code snippets in chunks above shows the implementation of the revealing module pattern.

Now, let’s try to execute the code by providing the input and check its output.

If you try to execute the above code, we will observe that while getting the private property, we get undefined. Most of the code implementation is self-explanatory.

As promised, here is below attached entire code snippet.

I hope, you might have got some ideas about the module and revealing module pattern.

This way we can achieve the data encapsulation and privacy which is the idea behind using the module pattern or revealing module pattern.

Happy coding. Keep learning. Keep exploring.😊

DOM Manipulations in Angular

Sabyasachi D Maven — Tue, 19 May 2020 05:55:39 +0000

While working as the front-end developer, the most important point to focus is to manipulate the DOM as less as possible which in turns may improve the web performance.

As we all know that Angular was developed to run on all platforms like browser, webworkers, universal, pwa.

In this article, we will emphasize on the following points.

1. Correct approach working with DOM.
2. Tools to work with DOM.
3. View and rendering layer architecture.

Lets’ start...

Any Angular application has rendering and presentational logic.
I know most of us know about it. Still, we will try to decipher the difference between them.
Suppose, we have two list of the data that needs to be rendered as the left and the right panel. On the left panel, we have menu items by category and based on the category, we display the items in the right panel.

The presentational logic goes to the component. The component is sort of the container with the view/ presentations specific data.

So, now the question is where to put the rendering logic.

So, there is layer between the component and the DOM element is the directives where we encapsulate the templates and perform the manipulation within the directives. Then, we pass the data binding to the directives and render the business related data to the UI.

So, just to recapitulate the points whatever we have learned so far.

1. Split the presentational and rendering logic.
2. Put the presentational logic to the components.
3. Put the rendering logic to the directives.
4. Use the data-binding mechanism for the communication.

So, using the above approach has 2 benefits overall.

1. Presentational logic can be reused on the other platforms.
2. Rendering logic reuse across the application.

Angular, by default, don’t provide the built-in directive to the above approach. So, we need to implement the custom directive for it which we will see it in action going forward.

Let’s try to use a custom directive inside a component.

Nothing, great at this point until we see how the custom directives is implemented.

So, if we see the above code, this is how the custom directive is implemented. But, if we look the code, we are directly accessing the api to manipulate the DOM which Angular doesn’t recommends.

Why?

The reason is the plaform dependence as we have discussed above.

The Non-DOM environments like Universal, Webworker. If we try to run the directive inside WebWorker, it will result in an error.

But, we have tools which makes the DOM access safe. Here comes the point, where will uncover the ways to manipulatet the DOM in Angular.

Before manipulating DOM, first we need to understand what operations are will going to perform on the DOM.

Generally we can categorize into two parts as shown in the below diagram.

In a nutshell, it as follows:

Renderer: Use when we need to change/read DOM element properties.
ViewContainerRef: Use when we need to modify DOM hierarchy.

We will try to see both these ways in much detail.

Renderer (Renderer 2): It marks the direct DOM access safe (platform independent).

Few DOM manipulation methods as follows:
setAttribute
removeAttribute
addClass
removeClass
setStyle
removeStyle

If we look the implementation of the custom dirctive using Renderer2 in recommended Angular way.

So, if we think how Renderer service is making this code implementation, lets’ visualize the Renderer architecture how it makes possible.

The main piece in connecting the dot is the DOM adapter which acts as a bridge between the Native API( browser) / platform and the framework (Renderer). It’s implementation is always platform specific.

But, there is one more point to note that each component in Angular depends on how to render the view. We have used the encapsulation like Native, Emulated (default), ShadowDOM, None.

So, Renderer service depends on the component encapsulation before the DOM is manipulated.

In turn, the Angular create the dedicated Renderer as per the component.

So, this is the reason we can’t inject the Renderer in the standalone service.

Hope the above diagram makes sense the connection between the View Encapsulation and Renderer.
For the layer of bit comfortability, attaching a diagram to get idea different Renderer abstraction on different platforms.

Sidenote: Don’t use Renderer for the DOM hierarchy modification.

Moving ahead with the other piece of the DOM modification is the ViewContainerRef.

So, to understand the ViewContainerRef, we first need to understand the
relationship between the View and the DOM.

Lets’ visualize the diagram.

So, when we create a component in Angular, the compiler in turns takes the set of the template instructions from the component and creates the view. In turn, the view creates the node elements (depends on the template).

View is core-concept of Angular. It’s an abstraction which associates the DOM elements defined in the component templates.

Now, to our surprise, we define the component, but how the view gets created. The angular compiler does that. Let’s see this diagram.

If anyone have worked on the AOT compilation, we might have seen the viewfactory. But, what exactly is the ViewFactory?

ViewFactory can be interpreted as a set of instructions (what type of view and DOM nodes) getting from the component template and which in turns creates the view.

Basically, the instruction set has 1–1 relationship between the components and its view which gets resolved by the View Factory. We can take the example of the dynamic component creation in Angular.

One important to note that the Angular Change Detection works with the View. Any changes in the view reflec the changes in the DOM elements defined in the component. So, its a one way process.

Now, let’s remove the span element from the DOM. We will see that the structure of the DOM gets changed but the structure of the view is intact.

The answer is even if we have removed the element from the DOM, its’ reference is still present in the View which creates the possibility for the memory leak.

Imagine, we have a component with the lot of DOM elements and removing one element from the component tree still have its reference in the view nodes. So, when the angular change detection mechanism runs, it will still run on the removed element from the DOM which has it’s reference in the view. So, in order to access the DOM safely, we use the ViewContainerRef.

ViewContainerRef: Makes DOM hierarchy changes safe.
Creating views:
1. createComponent (dynamic component creation) — Created from the view factory. Component that is not found other component templates.
2. createEmbeddedView (TemplateRef) — In Angular, we reference template using the Template ref (a reference to the compiled template).

View manipulation methods
insert
attach
detach
remove
move

To conclude this article, just a few takeaway points.

put presentational logic into components.
use custom directives to manipulate the DOM to make it more platform independent and DOM safe.
Use Renderer when direct access to native DOM api is necessary.
Use templating technique and ViewContainers to modify the DOM hierarchy.

Hope, you have got some sense on how the work with the DOM manipulations in Angular.

Happy coding. Keep learning. Keep exploring. 😊

RxJS Operators: throttleTime & debounceTime

Sabyasachi D Maven — Sat, 25 Apr 2020 14:47:04 +0000

As per the official doc, RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

One of the most used operators while performing search input is the debounceTime and throttleTime but there are variations between these two on their usage.
Let's deep dive about these operators.

As per official definition:
debounceTime : Emits a value from the source Observable only after a particular time span has passed without another source emission.

A classical example of the debounceTime is the type-ahead/ autocomplete.

The marble diagram for the debounceTime is shown below:

If we observe the marble diagram, the debounceTime wait is 20ms, if the user performs any value search within 20ms, the value which gets captured for the search only after the debouncetime is elapsed. So, if we observe, the value "b" is not captured for the search value.

Let's see an practical example for the debounceTime.

We have created an html input tag with using ngmodel as the above code is much self-explanatory.

Let's focus on its implementation which goes as.

From the above info, we have used an wikipedia search api, and on the constructor method, we have called the fetchdata method with the argument of the input value search passed to it.

Don't worry about the other operators in the image like switchMap, distinctUntilChanged. Our main focus will be on the debounceTime.

So, if we try to run the above example, we will find out that the latest value which will be passed as a search parameter after the 4000ms has been elapsed.
Just for the reference, the search value will yield as shown below:

Please feel free to play-around with the code to make yourself more comfortable with the debounceTime operators.
Further moving on, let's see the second operator throttleTime with the same example. We will just update the debounceTime to throttleTime to observe the behavior.

As per the official docs.
throttleTime: Emits a value from the source Observable, then ignores subsequent source values for duration milliseconds, then repeats this process.

If we try to demystify the above definition, we will see the value which gets emitted will be captured and then it delays the amount of the time which has been provided. Once, the time has elapsed, it will again start capturing the subsequent values and the process continues.
Firstly, let's observe the marble diagram for the throttleTime as per the RxJS docs.

Try to observe the marble diagram, the value which gets emitted first was "a", then there is some throttleTime(let's say 20), the value "x" got ignored and once the time had elapsed, the next value which was captured is "y" and similarly this process continues.

The most viable use of the throttleTime where it can make more sense is the button click rate or the double click, if the user clicks the button multiple number of times.
Overall, the throttleTime makes more sense when we try to limit the number of events that happens in sequential manner.

Let's see the implementation of it.

As already explained about the throttleTime, we will observe after executing the piece of the code above, we will see that 1 event has gone through, throttleTime will allow events to go through again after 4000ms. But only for events created after the 4000ms. This means that when a user types ro within 4000ms the suggestions will only represent the return value r. When the user types m it will search for the value rom.

If we observe the above diagram, the user has entered the search value "ro" but the value which gets passed is only "r" which means the first events which took place was with the value "r" and the next event will perform after 4000ms has elapsed. So, there is a delay of 4000ms, the next event where the value will be searched as "rom"; See the below image as follows:

My suggestion is to play around with the code and get yourself more to explore about this operators in more detail.
Most used areas for these operators as follows:
debounceTime:

1. AutoComplete
2. Typeahead

throttleTime:

1. Limit click rate
2. Double Click

I hope this article have given some sense about the RxJS operators.
Happy coding. Keep learning. Keep exploring. 😊