According to the official documentation of Angular, components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. These components helps us to understand and organize the UI codes, easily.

In this article, we’ll see how to make these components interact with each other. More precisely, we’ll learn various use cases of passing data between components.

Initial Setup

First of all, we’ll open the terminal and initialize our angular application with the following command — ng new exercise. This will create a folder with the name exercise. …

In this article, we’ll discuss about creating a simple visitor’s register application using TypeScript, in which we’ll be able to make a list of people checking in and out of the premises.

The final look of this exercise is given below:

Initial setup

To use TypeScript, we have to install the TypeScript package using NPM. For that we will run the following command in the terminal.

npm install -g typescript

We are installing the package globally into our system.

After that we’ll create a directory with the name practice, where we’ll write codes for learning TypeScript.

In the project directory, we’ll…

According to https://www.typescriptlang.org/,TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.

Browsers, by default, do not understand TypeScript. After writing TypeScript code, we have to compile it into JavaScript in order for browsers to understand it.

TypeScript allows us to use types. If we declare a variable in TypeScript to be of certain type (say number), then we can’t change that number type later on to string, boolean etc. It makes our error checking process and debugging of our code a bit easier. …

In this article, we’ll develop a simple note-taking application using HTML, Bootstrap, and Vanilla JavaScript, in which we can add, delete and search for our notes. The notes will be stored in the local storage of the web browser and they will not be deleted even if the browser is closed. The application will also prevent HTML and script injections via the input field.

After completing this exercise, our application will work as follows —

Now, let’s dive into this exercise.

First of all, we’ll create a project directory with two files — index.html and script.js.

The index.html file…

JavaScript is a single-threaded language. That means, only one line of code can be executed at a time and all the codes are executed one after the other.

But there are certain situations in which a line of code needs to fetch data from the database or any other APIs, which takes time. In these situations, the execution of subsequent line of codes will get blocked. They will only be executed after fetching the data. And this is not a good experience. So, to counter this situation, we have asynchronous codes in JavaScript. Asynchronous codes do not block the subsequent…

In this article, we’ll develop a React application which will fetch data (page by page) from the following API — https://jsonplaceholder.typicode.com/photos and will display them on the browser in the form of a table. When the application is opened in the browser, it will display the contents of the first page and upon scrolling, the application will load and display the subsequent pages as well. The final look of the application is shown below —

Initial setup

First of all, we have make sure that Node.js is installed in our system. If so, we’ll create a directory with name React_Projects and…

In this article, we’ll create a simple react application where we’ll use redux for state management. The final look of this application is shown below —

In this exercise, we’ll use combineReducers() of the redux library which combines multiple reducers into a single reducer.

According to the official documentation, As our application grows and becomes more complex, we can have multiple reducers each managing independent parts of the state. The combineReducers() helper function turns an object whose values are different reducing functions into a single reducing function that we can pass to createStore().

Initial setup

First of all, we have make…

In the following article, we’ve discussed the procedure to create a credit card payment portal using React-router and Context API.

But, in this article, we’ll create the same application using react-router, redux and formik.

Our final application should have the following features —

1. A home page with a button which will take the user to the payment portal.

2. The payment portal page should have a form with a ‘Make payment’ button and following input fields —

• Credit Card Number (mandatory, string, 16 digits)
• Card Holder Name (mandatory, string)
• Expiration Date (mandatory, Date > Current Date)
• Security Code — CVV…