Freaky Jolly - Page 2 of 56 - Learn . Code . Conquer

Angular 13 How to Make REST Search Call using RxJS Debounce ?

April 30, 2023February 13, 2022 by Jolly

In this Angular 13 tutorial, you will learn how to make the API search calls to a remote server in an optimized way. By using the RxJS operators and functions we can minimize the number of API calls made to the server and same time improve the usability of the application by implementing the debounceTime, filter and distinctUntilChanged to bring a magical change in your app.

This application will fetch remote server responses using a third-party API by using the HttpClientModule of Angular to make HTTP calls. By using the RxJS library we’ll control server API hits a user makes while communicating with the server limiting the network resources to optimize the client application.

Many of the real-world applications have search features that filter data fetched from a server or connected to some third-party API. In a normal practice a user types in the query to get related results in response. But in a technical sense if we bind a keyup event on an input search, then on every keyup event an API hit will be made for example if the user types in “car” then three API hits for each character will be made.

Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial

April 30, 2023January 18, 2022 by Jolly

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.

Angular 13 Dynamic FormsGroups using Reactive Form Tutorial

April 30, 2023January 2, 2022 by Jolly

In this Angular tutorial, you will learn how to create dynamic FormsGroup in the Angular application. You will also get to know how to enable/ disable a section/ form group in a reactive form and dynamically add or remove form groups and controls.

Using Reactive forms in Angular, we can create Forms with multiple sections which are called form groups. These form groups help to easily create multiple sections of controls in the same place. For example, you may have a profile form which can have different sections for personal information and professional details.

Phone (Mobile) Validation Using ReGex in React Js – StackBlitz Example

July 2, 2023October 16, 2021 by Jolly

How to validate a phone/ mobile number in the react js form; In this tutorial, you will learn how to validate the phone number using the regex pattern in React application. We will use the regex pattern to validate the phone number value in JavaScript.

Angular Material 13 Server Side Table Pagination Example

April 30, 2023October 15, 2021 by Jolly

Adding server-side pagination in the Material table using the Mat Paginator component. We will fetch the dynamic rows from the MySQL table and fetch them using the PHP file. In this tutorial, you will learn how to add dynamic pagination to load items for a page from a database on pagination.

Angular 13 Material Dialog Example – Positions, Fullscreen, Events Tutorial

April 30, 2023September 25, 2021 by Jolly

In this Angular material tutorial, you will learn how to implement Dialog modal with an extensively used scenario tutorial with easy to go tutorial.

You will get to know how to position a Dialog or display a fullscreen modal popup. Explore various events and popup hooks including after opened or closed callbacks. Passing data dynamically to the modal and getting back the data to the parent component.

React Fixed Animated Header with Fade and Slide In onScoll Event

September 29, 2023September 12, 2021 by Jolly

In this tutorial, we will create an on-scroll sticky header using React JS which will remain fixed on the page scroll. Also, it will have a Bootstrap navigation item with a logo that will resize with CSS animation.

The header will become fixed as the user scrolls down the page, and we will also implement various animation style options including Slide In and Fade In. We will implement the fixed sticky header by following the step-by-step guide to developing a sample application that demonstrates these features.

Vue – Bootstrap Date & Time Picker Calender Component Example

January 28, 2023September 4, 2021 by Jolly

In this comprehensive tutorial, you will learn how to create a robust and reusable date & time picker component in the Vue application. The DateTimepicker popup will be compatible with bootstrap 4 stylings. We will deploy the vue-bootstrap-datetimepicker library package to create a date-time picker.

Custom Email Validation Regex Pattern in React Js

April 30, 2023August 29, 2021 by Jolly

How to validate an email address in the react js form; In this tutorial, you will learn how to validate the email address using the regex pattern in React application. We will use the regex pattern to validate the email address value in JavaScript.

Chrome Styled Color-Picker in React Js Application

April 30, 2023August 21, 2021 by Jolly

Colour picker component to select color code in React js application; In this React tutorial, you will learn how to add a color selection or picker component in React application.

In the web applications, which includes online tools to generate dynamic and creative layouts deploy color-picker widget. Using such interactive tools, users can choose colors and adjust the shade for multiple DOM elements for example cards, greetings or image editor tools.

Ionic 5 Range Slider Example – Single, Multiple Markers on Bar with Custom Styling

June 4, 2022August 21, 2021 by Jolly

Ionic Range Slider with draggable tick icons on the scaling bar; In this Ionic 5 tutorial, you will learn how to add a Range slider using the build-in UI components in the Ionic Angular application.

A range slider component consists of draggable markers, which can be dragged on a defined bar to select a value. The range slider bar can have single or two markers to select a value from the minimum or maximum scale.

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

April 30, 2023August 21, 2021 by Jolly

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 React application, we usually use HTML native controls. To select and upload the selected file, we will assign the file object to a FormData. After that, the payload will be sent to the PHP backend using the HTTP Post call. To enable the HTTP communication from React app to the server we will utilize the Axios library package.

Angular Responsive Image Slider/ Carousel with Zoom – Lightbox Popup Example

April 30, 2023August 14, 2021 by Jolly

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.

Angular 12 FullCalendar Example – Create & Display Dynamic Events

April 30, 2023August 14, 2021 by Jolly

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.

Switch Multiple Languages i18n using Ngx-Translate in Angular 12

July 2, 2023August 8, 2021 by Jolly

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 the browser or system setting.