Let’s Code Better

  • withRouter in Next.js – When and How to Use it?

    withRouter in Next.js - When and How to use it?

    Next.js is a popular React framework that enables us to build server-side rendered and statically generated web applications. One of the core features of Next js is client-side routing and navigation by using the <Link> component from next/link.

    Read more: withRouter in Next.js – When and How to Use it?
  • [Angular] Add, Read, Detect Change and Preserve Query Parameters to URLs

    [Angular] Add, Read, Detect Change and Preserve Query Parameters to URLs

    Have you ever faced a need to pass some data between routes or pages in your Angular application? For example, while implementing pagination, filtering products by category, sorting a data table, and showing product details? In such situations, query parameters are the perfect solution for such situations! Query parameters allow us to optionally pass key-value data…

    Read more: [Angular] Add, Read, Detect Change and Preserve Query Parameters to URLs
  • [Angular] Removing Query Params from the URL – 4 Methods

    [Angular] Removing Query Params from the URL - 4 Methods

    In Angular applications, the query parameters are often appended to the URL to pass data between routes and components. These query parameters can be used for pagination, sorting, filtering, session management like direct login and more. Sometimes, we may also want to remove these query parameters from the URL due to various reasons for example:…

    Read more: [Angular] Removing Query Params from the URL – 4 Methods
  • React – Inline Editable React Table Rows with Edit, Cancel and Save Actions

    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…

    Read more: React – Inline Editable React Table Rows with Edit, Cancel and Save Actions
  • Creating Line, Bar, Pie Chart in XLSX Files Using Python’s Openpyxl Library

    In this guide, you will learn how to easily create and Excel file with different types of charts using Python’s openpyxl library. We will create the most primary chart types including Line Chart, Bar Chart, and Pie Chart. We will discuss each and every step to create various kinds of Charts in the XLSX file…

    Read more: Creating Line, Bar, Pie Chart in XLSX Files Using Python’s Openpyxl Library
  • React – Download Multiple Page PDF from Various Sections

    In this React tutorial, we will discuss how we can download multiple sections of a page into a PDF file, where each page will have a separate HTML section. Sometimes there are requirements, where a page has various sections like charts, tabular data or images, that we need to download as a PDF file. On…

    Read more: React – Download Multiple Page PDF from Various Sections
  • Mat Table Vertical Scroll Fixed Header Tutorial Angular

    We will learn how to create and implement Vertical Scroll Fixed Header with Mat Table in Angular. We will get step-by-step knowledge about the mentioned topic in this tutorial. Note that the @angular/material/table package provides to add a material table with vertical scroll to your angular app.

    Read more: Mat Table Vertical Scroll Fixed Header Tutorial Angular
  • React Native Snackbar: A Comprehensive Guide

    Snackbar UI components are a popular feedback tool which helps to enhance the user experience. The snackbar component in React Native can be easily implemented using the react-native-snack bar library. This article aims to provide detailed Snackbars use cases and explore their various practical examples.

    Read more: React Native Snackbar: A Comprehensive Guide
  • Creating Charts in XLSX Files Using Python using matplotlib & openpyxl

    In this guide, you will learn how to create different types of charts in XLSX files using a Python script. Moreover, we will be creating three types of charts including Line Charts, Bar Charts and Pie Charts. We will have a dummy set of data values to generate an XLSX file with draggable Charts in…

    Read more: Creating Charts in XLSX Files Using Python using matplotlib & openpyxl
  • Styling in React Native – Various Examples to Style Components

    The way we do CSS styling in Reactive Native apps is mostly the same as we do in Web applications but only a few minor differences. We will create simple UI components like a page with Header, Content and Footer, Table and form with Checkbox, Radio buttons and Textarea. In React Native, instead of using…

    Read more: Styling in React Native – Various Examples to Style Components
  • React Native Confirmation Code Field Example with Number Boxes

    In this React Native tutorial, you will learn how to create code confirmation fields when users can enter the OTP or verification number codes or Alfabets to proceed with the verification using the react-native-confirmation-code-field package module. The Conformation or Verification boxes field is used in various applications where the application can get the user’s phone…

    Read more: React Native Confirmation Code Field Example with Number Boxes
  • Login & Signup Screen Template with Bootstrap in React

    Friends, as we know that login system allows the user to gain access to any software system securely. Sign Up is the process that enables the user to register in any web and mobile app. So, in this tutorial, we will get to know how can we create an attractive login and user registration template…

    Read more: Login & Signup Screen Template with Bootstrap in React
  • Angular 15 Get Value from Disabled Form Control while Submitting

    In an Angular Form, we may sometimes be required to disable some of the form controls based on complex logic. When we make a form control is disabled, it is not considered as the value during submission of the forms. The form control values are only fetched from controls that are enabled on the time…

    Read more: Angular 15 Get Value from Disabled Form Control while Submitting
  • Resolved! | ReferenceError: primordials is not defined

    While working with npm commands, we generally face many heads shaking problems. many of them are resolved in seconds but some can ruin your days to resolve. One of the similar issues we’re going to discuss in this post. I faced this NPM issue while working on an Angular project. I will share how and…

    Read more: Resolved! | ReferenceError: primordials is not defined
  • Validate Phone Number in an Angular Reactive Form

    In this tutorial, we will learn to validate a 10-digit phone/mobile number in an Angular 11/12 app. We will use Reactive Form for this. We will surely get to know about implementing phone/mobile number validation in simple and easy steps. How to Validate Phone/Mobile Number using Reactive Form in Angular See the below steps for…

    Read more: Validate Phone Number in an Angular Reactive Form
  • Angular | How to Move/ Copy Folder/Files During Project Build Process

    In this post, we’ll quickly discuss how to move or copy a resource like the dist folder or some files from/to the assets folder to some other target folder. During the build process in the Angular project where we simply run the $ ng build or $ npm run build command to create the distributable…

    Read more: Angular | How to Move/ Copy Folder/Files During Project Build Process
  • Learn To Create React Modal Popup With material UI

    Modals are the widely used component in React-based web and mobile apps. A Modal Popup provides a simple solution to user interface-related problems. A Modal window covers the entire screen and is useful in displaying relevant information to the users. The other names given to the Modals are Overlays, Dialogs, etc. It constitutes a convention…

    Read more: Learn To Create React Modal Popup With material UI
  • Angular | OAuth2 or Open ID Connect using angular-oauth2-oidc Tutorial with Example Application

    In this Angular tutorial, we’ll discuss How to implement the OAuth2 or Open ID Connect Authentication (OIDC) feature using the angular-oauth2-oidc package module in the Angular application. The angular-oauth2-oidc is a very popular and widely used Angular package to implement the OAuth2 protocol-based authentication. It supports many configurations to easily modify the current flow or…

    Read more: Angular | OAuth2 or Open ID Connect using angular-oauth2-oidc Tutorial with Example Application
  • Resolved! | FATAL ERROR: JavaScript heap out of memory During Angular NG Serve

    In this article, we’ll discuss, how to resolve the “JavaScript heap out of memory” which we face due to insufficient memory allocated to Javascript operations. Sometime back I faced a similar kind of issue while working on my Angular project. Like normal day to day tasks I executed the “<strong>ng serve –open</strong>” command to run…

    Read more: Resolved! | FATAL ERROR: JavaScript heap out of memory During Angular NG Serve
  • Angular Proxy Configuration – Run Multiple Applications from same PORT using PROXY Config

    In this port, we will discuss how to configure PROXY in Angular application to run multiple applications on the same port for local development setup. When we create a new Angular application using Angular CLI, some of the defaults are automatically configured inside the angular.json and other files. To run the Angular application on local…

    Read more: Angular Proxy Configuration – Run Multiple Applications from same PORT using PROXY Config
  • Real-Time Angular Form Status Updates using Observables

    We are going to discuss How to check if Angular Form is VALID or INVALID across components. We will be getting real-time updates by deploying RxJS Observables to an Angular form to emit its validity. While implementing Template-driven or Reactive forms, we may need to get the Form status to emit across components or various…

    Read more: Real-Time Angular Form Status Updates using Observables
  • React – How to Download a Div Section as a High-Quality PDF with Padding

    In this tutorial, we will learn how to download a div section in view as a high-quality PDF file in a React app. We will be using the html2canvas library to capture the content of the div and the jsPDF library to generate the PDF. We will also add padding to the content and improve…

    Read more: React – How to Download a Div Section as a High-Quality PDF with Padding
  • How to Make External API calls in Laravel? – GET, POST, PUT, DELETE

    In the modern web development era, integrating external APIs in a Laravel application has become a vital aspect. In this tutorial, you will learn how to call an external API in a Laravel controller. We will be covering various examples of sending HTTP API requests, such as GET, POST, PUT, and DELETE, using Laravel’s Http…

    Read more: How to Make External API calls in Laravel? – GET, POST, PUT, DELETE
  • React Tutorial: Validate White and Empty Spaces from Input Fields to Message

    We will discuss how to implement white and empty space validation for form input fields in a React application. We will be doing this by using regular expressions which are a powerful tool for pattern matching in strings. In this article, we will create a sample component that not only detects white and empty spaces…

    Read more: React Tutorial: Validate White and Empty Spaces from Input Fields to Message
  • Create HeatMap in React js like GitHub using react-calendar-heatmap

    In this article, we will create a Heatmap as we see in GitHub, where data is shown in a table-like format having horizontal and vertical lines of boxes, each box represents a day and we can have different visual colors of each box based on the count of data in it. To create HeatMap in…

    Read more: Create HeatMap in React js like GitHub using react-calendar-heatmap