What is Virtual Scrolling?

Virtual scrolling renders only the visible items in a list or grid, instead of loading the entire dataset at once. It dynamically creates and removes elements from the DOM as the user scrolls through the list. This approach is useful when dealing with huge data because it significantly improves performance and reduces memory consumption.

Benefits of Virtual Scrolling:

1. Improved Performance: Virtual scrolling dramatically enhances the performance of web applications by rendering only the visible items. This results in faster initial loading times and smoother scrolling.
2. Reduced Memory Usage: Since only a subset of items is in the DOM at any given time, memory usage reduces significantly, making it feasible to work with large datasets without causing memory-related issues.
3. Consistent User Experience: Virtual scrolling provides a consistent user experience, regardless of the data size, as the scrolling remains smooth and responsive.

Implementing Virtual Scrolling in Angular Material:

Angular Material provides a CdkVirtualScrollViewport directive to implement virtual scrolling. 

Below are the steps for the same

• Install Angular Material using the below command

        ng add @angular/material

    import { ScrollingModule } from '@angular/cdk/scrolling';
    @NgModule({
       imports: [ScrollingModule],
    })

<cdk-virtual-scroll-viewport itemSize="50" minBufferPx="200" maxBufferPx="400"
                             class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>-->

<h4>Items list with Virtual scrolling enabled</h4>
<cdk-virtual-scroll-viewport itemSize="50" minBufferPx="200" maxBufferPx="400"
                             class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>      

Performance:

• Displaying plain list without virtual scrolling

Code

<div>
  <h2>List of Items</h2>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

Performance:

References
https://material.angular.io/cdk/scrolling/overview

If you like this post and are interested to learn more about MInimal API, please go through below links for other related posts

https://codingizfun.com/

The post Angular Material Virtual scrolling appeared first on Coding Tutorial.

    Unanimous answer found in most of the websites is the reduction of complexity. Let’s dive into this in detail.

In a Nutshell, Maps hold key-value pairs and have below advantages over Objects

•     First, we can use different data types like objects, functions and Primitive types as keys which is not possible with objects. Objects can only have strings as keys.
•     Second, Maps are iterable. Objects can be iterated by converting to an array or checking if a property belongs to it and not a prototype.

       Confusing??? Let’s try iterating through a Javascript object.

Iterating through Javascript Object

        a. Use “Object.keys” or “Object.getOwnPropertyNames” with “foreach”

        b. Use “for..in” with “hasOwnProperty”

    Iterating through Maps in Javascript

     It is simple compared to objects. Just use a for loop, that’s it!!!

    3. Retrieving size of a map is easy by using “size” property. 

Where to use

Let’s see where we can use Javascript Maps. Javascript Maps are useful to store “key-value” pairs. For instance, let’s consider “Two-sum problem”. 

Problem Definition

Given an array, return indices of two numbers such that they add up to the given sum

Solution

1. Here, we are creating a Map with “Target-number”(difference of current number from required sum) as key and index as value.
2. From next index, we check if the “Target-number” exists in the array and return the Array indices if found.
3. If not found, we continue with step 1.

Let’s debug the code for given input

i=0    arrayMap[0] does not exist and it adds (7, 0) to arrayMap.

i=1    arrayMap[7] =0 and we will return [0,1] which are the indices.

Javascript Maps – The Tricky Part

    We all know about “NaN” in Javascript. It does not have a real value and comparing it to itself doesn’t return true.    

Now, here’s a tricky question. Guess the output of code below

                let obj= new Map();

                obj.set(“Name”,”Test”);

                obj.set(NaN,”Test1″);

                obj.get(Nan);

If you answer is “Test1”, you are right.

We can use “NaN” as key in Javascript Maps. Appropriate value rendered with “NaN” key.

                That’s it, there ends my first post. Hope it was not boring and happy coding!!!

References

Map – JavaScript | MDN (mozilla.org)

JavaScript Maps (w3schools.com)

The post Javascript Maps vs Objects appeared first on Coding Tutorial.