New Promise Features in ES2021 “promise.race” and “promise.any”
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:
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.
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 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.
- Creating Custom Salutation Element to Display Hello World
- Passing data to Custom Element using attributes
- Creating Dynamic Element for Timer Functionality
Let’s start with creation of Custom Element which displays the time when the…
Create Custom HTML Elements and pass data 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.
- Creating Custom Salutation Element to Display Hello World
- Passing data to Custom Element using attributes
- 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
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.
What is 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:
- There are updates to Angular State variable
- Events are invoked inside Angular Component
- @Input…
Create Re-usable custom Dynamic Elements with JavaScript…
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.
- Creating Custom Salutation Element to Display Hello World
- Passing data to Custom Element using attributes
- Creating Dynamic Element for Timer Functionality
Creating Custom Element to Render “Hello World”
Capture Errors in React Component and Render Fallback Component
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:
- Working with “componentDidCatch”
- Using “getDerivedStateFromError” lifecycle event.
Understanding the Use Case Scenario…
- Create a component “EmployeeDetails” which contains an input box
- 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.
- Deploy a mechanism, which can track the returned error
- 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 ?
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
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.
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
