In this tutorial, we are going to see how to pass data from one component to another component in an Angular application. Before Angular, Server only will handle the data sending and data capturing activity. But in Angular, the data sending and data capturing activity is done by Angular only. We can send data to another page/component using many ways. Few options are listed below.

1. URL Parameter
2. Query Parameter
3. Extras State

This tutorial focuses on the routing parameters. Let’s see them one by one.

URL Parameter

The URL parameters are mostly used for SEO purposes. Just look at the sample URL.

http://localhost:4200/user/raja

…

Validation performs a very important role in application development. Validation helps the user to access/use the application in a better way. Most of the UI frameworks offer built-in validation. We can use some third party plugins for validation also.

Say, for example, if a user wants to verify his/her mobile number using OTP, then he/she must enter a mobile number in the given input field. Sometimes the user may enter more than ten(10) digits( Indian mobile numbers are ten(10) digit length). After entering the wrong mobile number(more digits), the user expects OTP. However, the SMS server will tell us the…

When we develop a simple application or complex enterprise application using any technology, The end-user always needs the report data in an Excel file. Why because most people rely on excel file. I worked with various Angular Enterprise applications. In all applications, the customer asked us to give a downloadable excel file using various filters.

In this tutorial, you will learn, how to download an excel file using Angular. I am going to show a demo of excel file download using ExcelJS and File Saver plugin. If you are an Angular developer and looking for export data to excel, then…

What is the problem with Angular Components?

The components act as a page in the Angular applications. Generally, What we do while creating Angular applications?. We will create many components based on the project requirements. Say, for example, if you are creating an Angular application and it requires ten pages(10 pages only). Then we will create ten components and deploy the application to the Cloud server. Assume the whole dist folder size is around 2–3 MB. When you load the particular application, the browser will load all the ten components in a first request. The loaded components will be cached in the browser memory. And it serves…

In this tutorial, we are going to see how to handle the Array using ReactJS. We can use the JavaScript standard Array functions in the ReactJS. However, we have to do some extra work to manipulate the Array in ReactJS, why because the ReactJS uses the useState Hook to update the variable values.

In this tutorial, we are going to see the following topics.

1. Iterate String and Array of Objects.
2. Add a new row to Array.
3. Update a row in Array.
4. Delete a row in Array.

Let’s see them one by one.

Iterate String Array:

First, we will see how to loop through…

In this tutorial, we are going to see, how to bind the variable value to the UI and input fields. Binding the variable to UI is a very easy task. We can simply use the single curly brace to bind the variable. However, if you want to display the updated variable value to UI, it is not easy and we need to do some extra work to do this task. Why because the variables in React are not reactive by default. To make the variables reactive, we need to use the useState Hook.

Binding Variable:

Like said earlier, we can easily bind…

Create a function and bind it with button click in React.

In this tutorial, we are going to learn, how to do the click event using React. Previously I had written an article about “How to Create Your First React Project”. We can do the click event using the onClick property of JSX.

Simple Button Click:

First, create a simple function in the App.js like below.

1. The simpleClick() is the function and it is an arrow function.
2. We can use let, var, const in the arrow function prefix. The const is preferred by many developers.

Now bind the function…

Create and Preview React Project. And bind variables.

React or React JS is a very popular JavaScript library and it is used to create SPA( Single Page Web Application). React is used to create interactive UIs. React is an open-source JavaScript library and developed by Facebook.

In this tutorial, we will learn how to create a new React JS project from scratch. I planned to write more articles regarding React. So this is just an introduction article to the React JS tutorial series.

Install Needed Software:

Our prime requirement is NodeJS. Why because we are going to use the NodeJS…