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…


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…


Generate and Save the QR Code as a PNG image.

Photo by Markus Winkler on Unsplash

In this tutorial, we are going to see how to generate the QR code using PHP. Recently I had a requirement to generate a QR code and create a PDF with the QR code. I am sharing the code in this tutorial.

There are many third-party libraries are available to generate the QR code using PHP. I chose the PHP QR Code library. My requirement is very simple. This library is a perfect match for my requirement. …


Use password_hash() and password_verify() function.

Photo by Ben on Unsplash

In this tutorial, you will learn how to save the password and verify the saved password using PHP and MySQL. At the beginning of the software applications, developers saved the password as plain text in the database table. When the database is hacked by hackers, they are able to view the passwords of the individual account. This causes a big problem for the organisations. To avoid this problem, the developer community recommended saving the password in an encrypted format in the table.

One-Way Hashing:

There are many recommendations available on the internet to store the passwords in the table. The…

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