In this Angular tutorial, we’ll learn how to implement an animated gray effect to display loader elements to indicate progress in Angular 10/9/8/7/6/5/4 application. The skeleton loaders depict the placeholder of the same structure for data going to be loaded. This type of skeleton loader got popularity when first seen in Facebook applications. The skeleton
Angular HRM | Enable Live Reload during Development using Hot Module Replacement Technique
In this Angular tutorial, we’ll discuss how to enable live reload features in the Angular project using Hot Module Replacement ( HMR ) technique to see live changes without loading the complete application during development. During normal development of an Angular project, when we save a change, the application is recompiled to re-build and paint
Angular 10|9 Customized Alerts, Confirm and Notification Message Boxes using SweetAlert2
In this Angular tutorial, we’ll learn how to implement custom Alert, Confirm and Toast messages in Angular 10/9/8/7/6/5/4 application by using the Sweetalert2 package. Sweetalert2 is an awesome package to show customized, animated, and beautiful Alert components. These are fully responsive and supported by multiple operating systems. The Alert messages created by Sweetalert2 adds up
Angular 10|9 Embed PDF Document Viewer with Controls to Zoom, Rotate, Search & OCR
In this Angular tutorial, we are going to discuss how to embed a PDF document viewer in Angular 10/9/8/7/6/5/4 application with the help of ng2-pdf-viewer package. Popular browsers like Chrome and Firefox come with a built-in PDF viewer, which provides many required features like Zoom, Search, Rotate, etc. But sometimes we may need a PDF
Angular 10|9 Tree Structure Parent-Child with Checkboxes and Expand/ Collapse using angular-tree-component
In this Angular tutorial, we’ll learn how to create a Tree structure with a parent-child hierarchy with expand collapse arrow and checkbox feature in Angular 10/9/8/7/6/5/4 application by using the @circlon/angular-tree-component package module. Tree Structure are used to represent a dense hierarchy of items having a parent-child relation. A tree display makes the information very easy
Angular 10|9 Generate/ Create QR Code using angular2-qrcode Tutorial with Example
In this Angular tutorial, we’ll learn how to implement a QR Code generator in Angular 10/9/8/7/6/5/4 application by using the angular2-qrcode package module. QR codes can be used for many real-world applications like sharing of data, location, product info, etc. These can be quickly scanned to reveal the encoded information. QR codes are square encoded patters
Angular 10|9 Switch Toggle Control UI Component using ngx-ui-switch Tutorial with Examples
In this Angular tutorial, we’ll discuss How to implement Toggle Switch UI component to add an on/ off button using the ngx-ui-switch package in the Angular 10/9/8/7/6/5/4 application. Toggle Switch components are a new trend and used widely event in place of Checkboxes and Radio controls. These are generic controls found in the iOS operating
Angular 10|9 Copy to Clipboard using Material or ngx-clipboard package
In this Angular tutorial, we’ll learn how to implement Copy to Clipboard feature in Angular 10/9/8/7/6/5/4 application by using two ways. Copy to Clipboard feature is required in an application to facilitate the user to quickly copy a text or content. Like we can have Cuopns, Offer codes, Some poems, Lyrics, etc which is intended
Upload Images and Files in React with Preview, Progress Percentage Bar using react-dropzone
In this React tutorial, we’ll learn how to upload single or multiple files by simply dragging and dropping on the uploader zone using the react-dropzone package library. We can display a preview of files and percentage progress bar of files being uploaded. To make file uploader easy and quick for users, we can add a
Multiple Draggable and Sortable Lists in React using react-beautiful-dnd Tutorial with Examples
In this React tutorial, we’ll learn how to build lists with draggable and sortable items. Using the react-beautiful-dnd package library, we can create animates and fully customizable lists with lots of features. Sortable lists are used to add items that can be dragged to interchange the position by simply dragging them over the list or between
How to Hide/Close Component on Click Outside the Element/Component using react-onclickoutside Tutorial with Example
In this React tutorial, we’ll learn how to detect click event listeners when the user clicks outside a component using the react-onclickoutside package. This package converts a simple component into a high order component to return click listeners with it. In an application, we may sometime need to create overlay and floating elements like menu
Formik React Forms using Bootstrap with Validation Tutorial with Examples
In this React 15+ tutorial, we are going to discuss how to build robust and advanced forms with validation in the ReactJs and Native applications using Formik. Creating forms in an application is always a painful and time-consuming process spacially in a composite application like React. A Form not only takes input from the user
AutoResizable Textarea Control in React as User Types using react-textarea-autosize
In this React tutorial, we’ll learn how to add auto resizable textarea form controls by using a jQuery inspired react-textarea-autosize package for React applications. A TextArea Form controls are used to type long texts by the user. It can have a custom height and width which can be adjusted by developers in the application. But
React Dynamic List using map() & If;Else and Switch Conditional Expression in JSX Template Rendering
In this React tutorial, we’ll look into some basic expression rendering methods in the components JSX template including dynamic looping over the Object to create a list, using conditional expressions lie if; else and Switch case to manage multiple conditions. What is JSX in React? First, let’s have a look at JSX which is used
Angular 10|9|8 Get URL or Set URL Parameters using Router and ActivatedRoute
Parameters passed in the URL can be easily accessed in Angular 10, 9, 8, 7, 6, 5, and 4 versions by using the ActivatedRoute class in @angular/router module. Small portions of information can be easily passed via URLs from one component to the other which is not sensitive and can be shared publically. It can
React Slick Carousel with Custom Navigation, Thumbnails and Lazy Loaded Images in Slider
In this React tutorial, we are going to implement one of the best responsive Image and content carousels Slick in the React application. The Slick carousel is used as a slider for Images as well as HTML content which supports multiple features. It is responsive and supports multiple devices and screen sizes. Some of its
React Copy to Clipboard UI Design Tutorial Example
In this React 16+ tutorial, we’ll discuss how to implement functionality to copy string data from any element or container on DOM by clicking a button using the react-copy-to-clipboard package. Click to copy is functionality is found where we have some text of information that is available for users to copy like promotion codes, message
React DataTables with Pagination, Filter, Sorting, Column Resizing, Expand Collapse Tutorial with Examples
In this React 16 + tutorial, we’ll look into how to implement advanced Datatables in a React application having features like Filter, Pagination, Sorting, Row Column Resizing, Row Expand Collapse and many more. Representing data not remained limited to simple HTML tables these days. Today we as a developer need some advanced forms on the
React Charts | Responsive Line, Bar, Pie, Scatter Charts Tutorial using Recharts with Examples
Hey there! Today we’ll discuss how to create and implement awsome responsive graphical charts in the React Js application by using one of the top and best charts library known as Recharts. In many data-driven web applications, we represent information in the form of graphical interfaces known as charts. These play an important role to
React Autocomplete to Fetch Local or Server response using react-autosuggest
In this React 16+ tutorial, we are going to discuss how to implement Autocomplete or AutoSuggest control in a React Js application by using the react-autosuggest package. An autocomplete control is used to enable a user to search matching options to the partial text entered. After entering some string, all the matching option values are
