Let’s Code Better

  • React Upload Single/ Multiple Files Example – Axios + PHP Tutorial

    File upload example using FormData in React application; In this guide, you will get to know how to select single or multiple files in HTML 5 React form then upload it using the PHP backend server. The file upload component in React will create formData and send it to the backend using POST call. In…

    Read more: React Upload Single/ Multiple Files Example – Axios + PHP Tutorial
  • Angular Responsive Image Slider/ Carousel with Zoom – Lightbox Popup Example

    Angular Image Slider Carousel Example with Zoom feature will be discussed in the upcoming tutorial. An Image Carousel or Slider with Lightbox effect shows a full/ large screen popup with the original image. That we’re going to discuss in this comprehensive tutorial by using the ng-image-slider library in Angular.

    Read more: Angular Responsive Image Slider/ Carousel with Zoom – Lightbox Popup Example
  • Angular 12 FullCalendar Example – Create & Display Dynamic Events

    FullCalendar example tutorial in Angular. In this tutorial, we will discuss how to integrate the Fullcalendar package module in the Angular application and display dynamically created events on the fly.

    Read more: Angular 12 FullCalendar Example – Create & Display Dynamic Events
  • Switch Multiple Languages i18n using Ngx-Translate in Angular 12

    Integration of multiple language support in Angular application tutorial; In this tutorial, you will learn how to add the Internationalization or i18n in Angular app by utilizing the ngx-translate plugin. Web application, having multilingual users, deploy internationalization aka i18n support in the application. Using which a web application switches to the native language by analysing…

    Read more: Switch Multiple Languages i18n using Ngx-Translate in Angular 12
  • React 17 Rich Content Editor Example – WYSIWYG CKEditor Tutorial

    Rick content editor integration in React Js application using CKEditor example; In this tutorial, you will learn how to integrate WYSIWYG rich text editor in React JS app using the profound CKEditor plugin.

    Read more: React 17 Rich Content Editor Example – WYSIWYG CKEditor Tutorial
  • React Form Custom Validation with Error Message Example

    React Form with Custom Validation Message using Pattern rule example will discuss; Onto this tutorial, you will learn how to add form controls with custom validation rules and show error messages in React js application. Firstly, we will create a form with a submit button as a component in react app. Secondly, the form will…

    Read more: React Form Custom Validation with Error Message Example
  • Angular FilePond Tutorial – File Uploader with Life to Level Next!

    You read it right! Today we are going to discuss the implementation of an extra ordinary plugin named FilePond. It is the best visual experience, I have ever seen in a simple yet complicated component like a File Uploader. In this tutorial, you will learn how to FilePond file uploader component in Angular application. Thereafter,…

    Read more: Angular FilePond Tutorial – File Uploader with Life to Level Next!
  • React Google SignIn/ Login Button Example using React-Google_Login Package

    Quickly add the Google SignIn or Login button in React js application; In this tutorial, we will integrate Google oAuth to enable a user login with Google credential in React application. In our Google + React example application we will implement the SignIn through Google account by using the react-google-login package. By going through this…

    Read more: React Google SignIn/ Login Button Example using React-Google_Login Package
  • Setup Google Analytics in React Application – React-Ga Tutorial by Example

    Adding Google Analytics tracking in React js application we will discuss; In this guide, you will learn how to quickly add Google Analytics tracking code into the React app with a super easy set of steps. To integrate Google Analytics in single page application like React, we will use the React-GA library package. It is…

    Read more: Setup Google Analytics in React Application – React-Ga Tutorial by Example
  • Angular Google Maps Get Current Location – Latitude, Longitude on Click Event

    Today, You will learn how to get the current location in Angular Google maps. We will discuss getting current coordinates including the latitude-longitude on click even on google maps in the Angular app. In this example, you will get the complete address a coordinate using the Geocoder service using Google API.

    Read more: Angular Google Maps Get Current Location – Latitude, Longitude on Click Event
  • Angular Radio Button Example – Reactive Form, Get Value, Validation Tutorial

    In this tutorial, you will learn how to add the radio button group in reactive form with example. The implementation of radio list control inside the angular reactive forms, which will emit the change event when selected. Radio form controls are used to allow a user only to select a single value out of a…

    Read more: Angular Radio Button Example – Reactive Form, Get Value, Validation Tutorial
  • Angular Material Card Examples – Using mat-card Component

    In this article, you will learn how to add the Material Card components to the Angular application. You will learn how to show Avatar, Images, Grid List and Item List in n Material Card with easy examples. Angular Material is a component library, exclusively built for providing fully compatible UI components for Angular applications. This…

    Read more: Angular Material Card Examples – Using mat-card Component
  • Animated Full-page Section Scrolling using Ngx-page-scroll Library

    Full-page scrolling with sections having animation example tutorial in Angular application; We will discuss how to implement different section scrolling for full-page in Angular application. To quickly integrate the full-page scrolling feature we will be using the Ngx-page-scroll library package.

    Read more: Animated Full-page Section Scrolling using Ngx-page-scroll Library
  • Stripe Payment Checkout Gateway Example | Angular 10,9,8,7

    In this tutorial, you will learn how to quickly integrate Stripe checkout payment gateway in Angular application through an example tutorial. We will discuss various configurations and methods to add one of the most popular payment gateways into your app.

    Read more: Stripe Payment Checkout Gateway Example | Angular 10,9,8,7
  • How to Add Print Page Button in Angular 12 without Plugin

    How to print the HTML page in an angular app is going to be discussed; we will learn how to integrate the feature of adding a button to generate the PDF file out of our current page. Which can be saved as a PDF file or get printed.

    Read more: How to Add Print Page Button in Angular 12 without Plugin
  • Angular Google Login Example – Social OAuth2 SignIn Tutorial

    Angular 12 Login with Google Example by Tutorial; Google authentication of the user using OAuth2 protocol; The Angularx-Social-Login package tutorial; In this elaborated angular tutorial, you will learn how to implement Google login in an Angular 2+ application. We will utilize the angularx-social-login library package. In today’s era, almost everyone is connected with social media…

    Read more: Angular Google Login Example – Social OAuth2 SignIn Tutorial
  • Angular 12 Image Cropper, Resizer Example – Ngx-Image-Cropper Package Tutorial

    How to Crop and Resize Images while uploading in Angular; Ngx-Image-Cropper Package Tutorial; In this Angular tutorial, we will learn how to add image cropper, resizer and calling component in Angular application. We will be using the ngx-image-cropper tool and discuss its configuration and customization properties.

    Read more: Angular 12 Image Cropper, Resizer Example – Ngx-Image-Cropper Package Tutorial
  • Angular 12 Multiple ng-content Example – Transclude Templates to Child Component Example

    Adding multiple ng-content tags in child component example; placing more than one component passed to transclude in child component; In this Angular 12 tutorial, we will discuss examples of passing more than one component template to the child; Using this we can transclude multiple components at particular places in the child. Components are the building…

    Read more: Angular 12 Multiple ng-content Example – Transclude Templates to Child Component Example
  • React 17 Bootstrap Dropdown Select-box Example – HTTP Response List in Options

    Bootstrap Dropdown Selectbox implementation example is going to be discussed in this guide; In this tutorial, we will add a bootstrap dropdown with dynamic options in React JS application. Bootstrap is a very common and widely used library due to its profound component collection. One of the most common components is a Dropdown. A dropdown…

    Read more: React 17 Bootstrap Dropdown Select-box Example – HTTP Response List in Options
  • React 17 Generate PDF from HTML Page Example – React-to-print Tutorial

    Create PDF files from HTML content example is going to be discussed; In this tutorial, we will discuss how to generate and export PDF documents from HTML content in React application. The PDF(Portable Document Format) files are immensely used file format, which is used for many purposes. PDF files can be easily shared as a…

    Read more: React 17 Generate PDF from HTML Page Example – React-to-print Tutorial
  • How to Export PDF from HTML in Angular 12

    Generate PDF file from HTML template in Angular 2+ application; In this tutorial, we will discuss how to convert the PDF file from HTML content on-page in Angular application. PDF means Portable Document Format, it is used to share information in the form of documents. PDF files are more secure than any other format as…

    Read more: How to Export PDF from HTML in Angular 12
  • React 17 Bootstrap Datepicker Example – Dynamic Component Tutorial

    React js Datepicker using the React-Bootstrap package is going to be discussed in this tutorial. We are going to learn how to integrate Datepicker in react app using the bootstrap component provided by the react-bootstrap package. Datepicker components are used to immaculate the user experience while selecting a date from a popup overlay. In this…

    Read more: React 17 Bootstrap Datepicker Example – Dynamic Component Tutorial
  • JavaScript – Compare Arrays – Get Matching Unique Values from two Arrays

    In this guide, we will discuss how to compare and get matching values like strings or numbers from two Arrays? The result will be the set of values that are available in both arrays. While working in Javascript may need to compare two arrays to find intersection values that are matching and fetch out the…

    Read more: JavaScript – Compare Arrays – Get Matching Unique Values from two Arrays
  • Angular 12 Multiple Image Uploader with Preview Example – PHP Server to Save file

    Upload multiple images and preview in Angular 2+ applications; In this Angular tutorial, we will discuss how to upload multiple images with preview and how to save them on the server using PHP backend. To upload images, we will use the Angular reactive form approach. Using the form, a user can select more than one…

    Read more: Angular 12 Multiple Image Uploader with Preview Example – PHP Server to Save file
  • [Angular 16] Global Loader Example – Spinner for HTTP Calls Tutorial

    Global Spipper Loader shown on HTTP calls example using ng-http-loader; In this tutorial, we will implement a global Spinner Loader in the Angular project by using a third-party package. Interceptors take count of pending HTTP calls, thus shows a spinner loader as an indication. Moreover, the loader spinner with a backdrop limits a user to…

    Read more: [Angular 16] Global Loader Example – Spinner for HTTP Calls Tutorial