New Promise Features in ES2021 “promise.race” and “promise.any”

Image for post
Image for post
Working with Promise Any and Race (promise.any and promise.race)

TechnoFunnel Presents another article on new Promise features in ES2021. We are going to demonstrate the usage and benefits of using these new functions in your application. Let’s create some promises and Introduce “promise.any” and “promise.race” keywords to the same.

Creating Promises in JavaScript:

https://gist.github.com/Mayankgupta688/2223d8b21191db1e21428115d61366ee

In the above code, we have created simple promise using “new Promise” keyword, which takes “resolve” and “reject” as a parameter. Once the Promise is Resolved, we can further attach a call back function to the promise.

https://gist.github.com/Mayankgupta688/797cb54fda86145714d485a54dd773fd

In the above code the callback function is triggered once the promise is resolved in 3 Seconds…


Understanding and Getting started with concept of Zone.js

What are Zones ? Why are Zones Used Zone.js
What are Zones ? Why are Zones Used Zone.js
Working with Zone.js

What is Zone.js

Every JavaScript Code that we execute, is executed within an Execution Context. Zone.js is a way of creating a new Context and getting the code executed within that context/Zone. Any code enclosed within a Zone whether synchronous or asynchronous is executed within the same context. Zone.js is basically used to create new context and execute code within it.

Why do we use Zone.js

In this section, we will analyze a problem statement that need to be resolved. In the code below, we have some synchronous functions that need to be executed, and we would like to evaluate the total time of Execution of these functions…


Creating Dynamic HTML Custom Component using JavaScript

TechnoFunnel provides another article to create Custom Dynamic HTML Component without using any Frontend Framework. In this article we are going to create a Custom HTML Component and dynamically update the Component to show the latest time. In the previous articles, we have created a custom Component.

This will be series of article, with each article adding more details and functionality to the custom Component created.

  1. Creating Custom Salutation Element to Display Hello World
  2. Passing data to Custom Element using attributes
  3. Creating Dynamic Element for Timer Functionality
Image for post
Image for post

Let’s start with creation of Custom Element which displays the time when the…


Create Custom HTML Elements and pass data using Attributes.

Passing Data to HTML Custom Elements using Attributes. What are HTML Custom Elements. How to create HTML Custom Elements
Passing Data to HTML Custom Elements using Attributes. What are HTML Custom Elements. How to create HTML Custom Elements
Passing Data to HTML Custom Elements using Attributes.

TechnoFunnel presents another article to demonstrate how to pass data to the custom components created using JavaScript. In the previous article we have created a reusable Custom HTML Element without using any Framework. Lets create a Dynamic Custom Components with JavaScript

This will be series of article, with each article adding more details and functionality to the custom Component created.

  1. Creating Custom Salutation Element to Display Hello World
  2. Passing data to Custom Element using attributes
  3. Creating Dynamic Element for Timer Functionality

To Reiterate, lets start with creation of a custom HTML Element which displays static salutation message “Hello World…”. …


Working with prefetching Data using Angular Resolver

Angular Guards, Resolve Angular Routing, Angular Routing Guards, What is Resolve in Angular. https://angular.io/guide/router
Angular Guards, Resolve Angular Routing, Angular Routing Guards, What is Resolve in Angular. https://angular.io/guide/router
Guard Types in Angular, Angular Resolve Guard

What is Angular Resolver?

Angular Resolvers are used in order to pre-fetch some data while the user is redirecting from one Route to another. The newly available page will already have the data that is required to be rendered in the page.

In certain scenario, we might require to pre-load the data for the component to be displayed, so that during the initial rendering itself the component contains the data rather than displaying the empty component first and then querying for API to extract the data.

Why do we use Resolvers in Angular Route?


onPush and Default Change Detection Strategy in Angular

TechnoFunnel provides another article on Angular Change Detection Strategy. There are 2 change detection strategy in Angular (Default and onPush). We will look for Advantages and Disadvantages of using these Strategies.

Change Detection Strategy in Angular, Angular Performance, onpush and default strategy in Angular
Change Detection Strategy in Angular, Angular Performance, onpush and default strategy in Angular
Angular Change Detection Strategies (onPush and Default)

What is Change Detection in Angular?

Change Detection in Angular

Angular Change Detection is responsible for making the component dynamic. During Change Detection Cycle, Angular looks for all the bindings, re-executes all the expression, compares it will the previous values and if the change is detected, it propagates the change to the DOM Elements.

Change detection in Angular is executed when:

  1. There are updates to Angular State variable
  2. Events are invoked inside Angular Component
  3. @Input…


Create Re-usable custom Dynamic Elements with JavaScript…

Image for post
Image for post

TechnoFunnel provides another article on creating custom elements in HTML using Native JavaScript without any third party Library. We need not to use any additional frontend framework to create dynamic custom elements. HTML5 provides us with the capability to creating reusable elements with few lines of Code.

This will be series of article, with each article adding more details and functionality to the custom Component created.

  1. Creating Custom Salutation Element to Display Hello World
  2. Passing data to Custom Element using attributes
  3. Creating Dynamic Element for Timer Functionality

Creating Custom Element to Render “Hello World”


Capture Errors in React Component and Render Fallback Component

What is componentDidCatch and getDerivedStateFromError in React. Working with componentDidCatch and getDerivedStateFromError
What is componentDidCatch and getDerivedStateFromError in React. Working with componentDidCatch and getDerivedStateFromError
componentDidCatch and getDerivedStateFromError in React

TechnoFunnel presents another article where we are going to talk about the mechanism to capture errors from the component and render a fallback component (ErrorComponent) in case the component results in some Error while rendering.

The following article will talk about the following lifecycle events:

  1. Working with “componentDidCatch
  2. Using “getDerivedStateFromError” lifecycle event.

Understanding the Use Case Scenario…

componentDidMount in React, getDerivedStateFromError
  1. Create a component “EmployeeDetails” which contains an input box
  2. As soon as the user types a blank space in the input box, component should return an Error signifying that blank spaces are not accepted.
  3. Deploy a mechanism, which can track the returned error
  4. On…


Create Angular Custom Structural Directives

TechnoFunnel presents another article on Custom Structural Directives in Angular. In this article, we will talk about What are Structure Directives and How to create Custom Directives with Angular.

What are Structural Directives ?

Image for post
Image for post

Structural Directive in Angular are responsible for manipulating, modifying and removing elements inside a template of a component. A structural directive is applied on a main element and according to the behavior of structural directive, it modifies and updates the main elements and its child elements. We have some inbuilt structural directives in Angular like “ngFor”, “ngSwitch” and “ngIf”. …


Working with JavaScript Object.assign Function

Deep and Shallow Copy in JavaScript with Object.assign, Cloning Data in JavaScript, Copy Data in JavaScript
Deep and Shallow Copy in JavaScript with Object.assign, Cloning Data in JavaScript, Copy Data in JavaScript
Deep and Shallow Copy in JavaScript with Object.assign

TechnoFunnel presents another article focussed on Cloning an Object using Object.assign Function in JavaScript. Object.assign is another great way to copy the object into some other Object. We will look whether we can perform Deep or Shallow Copy using this method.

For other Methods of copying Object, you can refer to the following:

What is Object.assign in JavaScript

Object.assign is used to copy the key value pair of one object to another. Lets look for the below code to understand the working of this keyword.

https://gist.github.com/Mayankgupta688/8ec7816d8648ac009b1c847171f0fb64

In the above code, we have created a new blank object using ”{}” and…

Mayank Gupta

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

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