Toastr is a popular, lightweight JavaScript notification library to displays non-blocking messages to users. We can easily implement various types of feedback to notify users of errors, success alerts, warning messages, or provide other feedback by adding just a few lines of code.
For the Angular applications, we will use the Nxg-Toastr package which is exclusively adapted for Angular applications where we can easily configure and use its various features without any problems.
In Angular, we already get basic internationalization built-in support, ngx-translate provides much more features with robust and flexible solutions to fulfil translation requirements in the application.
In this detailed guide, we will walk through the basic to advanced implementation of ngx-translate module including lazy-loading, language switch callback events, pluralization, caching, creation of unit tests etc. with easy-to-follow examples.
In this angular tutorial, we will discuss how to create dynamic draggable grid boxes using the angular-gridster2 library in Angular application.
A gridster is a UI component, having draggable and resizable grid boxes. Such kind of components can have multiple use-cases like sorting of items, solving puzzels, priortizing sections etc.
In this Next js tutorial, you will learn how to add a global loading bar in the Next js application using the NProgress module for showing a progress bar to indicate any asynchronous job.
Showing the loader progress bar is a very important element in UI to indicate user if any process is going on and will complete in a definite period.
In front-end applications, which are mostly data-driven and data is fetched from a remote server its always a good practice to show a loader progress bar to the user. In the Next Js application, you can easily implement a progress horizontal loading bar using the NProgress package module.
In this comprehensive Angular guide, you will learn how to set up the TreeView structure in Angular using the NGX TreeView npm library. The ngx-treeview library provides a number of features like filter search, checkbox selection, lazy-loading of child items, custom template support and much more.
We will walk through each and every step to implement each discussed feature in detail.
So let’s get into it…
In this Angular tutorial, you will get to know how to convert multiple HTML / View sections into a multipage PDG file so that each HTML section or container will show up on a different page in a PDF file.
This is a very common requirement for many Angular apps to download a single Multipage PDF file having various sections which are there on an HTML template.
Where we may have various sections/div/containers on view and we simply need to download those sections into a PDF file. We will be using the popular libraries html2canvas and jsPDF to achieve this.
In this tutorial, you will learn how to create a DateRangePicker component in React application. This DataRange Picker will allow users to select To-From Dates from the calendar and will also display the selected date range after the to-date is selected.
To create the Date Range Picker component for dates, we will use the react-date-range package module. Moreover, to easily style it, we will deploy the Bootstrap CSS library. We will walk through this detailed guide on React date range picker and include various use-cases with simple examples like selecting a default date To From dates and showing the selected dates in readable formats.
In this React tutorial, you will learn how to create React Table with inline editable rows. Each row of the table will have an Edit button, after clicking the Edit action there will be the Cancel and Save buttons. The React Datatable will be created using the popular react-table npm package module.
Moreover, you will also learn how to fetch table headers and rows data from a remote API using a dummy JSON server. In our example application tutorial, we will walk through each step to create a reusable react table component which will be consumed back into the main App js component.
When managing dependencies in a Node.js project, it’s important to specify the version of the packages you want to use. This helps to ensure that your project is using a compatible version of each package and reduces the risk of unexpected behavior caused by using an incompatible version.
Animating timers or counters in a React app can add an interactive and visually appealing element to your web pages. There are several npm packages available that provide the functionality to implement such animations in React. In this tutorial, we will go over some of the top npm packages that can help you achieve this.
Displaying time elapsed since a certain date is a common requirement in many web applications. “React-timeago” is a popular package that makes it easy to display the time elapsed in a user-friendly way. This package automatically updates the display as time passes, and also provides various customization options such as language and time units to display.
In this tutorial, you will learn how to use the “react-timeago” package in a React project, how to customize the output, and see various examples of how it can be used.
In this tutorial, we will discuss creating sortable lists with drag and drop feature using which items can be dragged from one list to drop in another. This feature will be provided by a popular library named Dragula.
Sortable lists are used to enable users to arrange items according to their priority or this item can also be moved or removed across lists. Such behaviour can be used in many places in applications like Task, Music, ToDo lists etc.
React Toastify is a library that allows you to easily create and manage toasts (small notifications) in your React application. In this tutorial, we will be building a sample React application that demonstrates how to use the React Toastify library. We will be covering the following topics:
React Virtualized Select is a versatile dropdown component for React apps that’s powerful, fast, and easy to use. It simplifies the creation of scrolling select lists that load quickly and smoothly even when they contain thousands of options. The component provides several essential features, including:
React Beautiful DnD (Drag and Drop) is a powerful and flexible library that allows developers to add draggable and droppable elements to their React applications. It is built on top of the popular react-dnd library and provides a set of higher-order components that can be used to create draggable and droppable lists, boards, and other interactive elements.