Learn When Functions Cause Problems and How to Solve it Using Pipes in Angular.

In the previous article, we have seen the performance problem in Angular using the ngFor and how to solve it using the trackBy function. In this tutorial, we are going to see another performance problem with Angular using the functions. This is a very simple problem. But many of us have not noticed this. I have not found this problem when I was a beginner in Angular.

When will a function cause a performance problem?

We always create functions to ease our work. Functions alone do not create performance problems in Angular. But if we use the functions in the HTML section, then sometimes it will cause a…


How to create Components, Routes, and send/receive data via those Routes in Angular

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…


Learn different types of Automation Testing

https://unsplash.com/photos/Tjbk79TARiE

What is Software Testing?

Software testing means testing software from the point of view of the customer/client, not the developer.

Let’s take a real-time scenario. Assume a developer has created a registration page for a web application. The developer tests the registration page and confirms it is working fine. But sometimes, developers forgot to test the registration page in different modes. Assume the password length must be eight or more than eight and less than sixteen characters. The developer may forget to inform the user about the condition that the password length should not exceed 16 characters. …


Loop through an array of objects using React.

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…


useState Hook Example

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…

Bharathiraja

Deep&Machine Learning, Ionic, Full Stack Developer. https://ampersandacademy.com/tutorials/ https://github.com/bharathirajatut

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