Let’s Code Better
-
Using Deferred Views in Angular 17 with @defer, @placeholder, @error, and @loading
Read more: Using Deferred Views in Angular 17 with @defer, @placeholder, @error, and @loadingAngular 17 has introduced Deferred Views which can help to drastically improve and optimize the performance of large-scale applications consisting of complex layouts. Deferred views allow us to delay the creation and rendering process of deferred sections of our template. Imagine having to wait for an entire movie to download before you could even see…
-
Angular 17 Standalone Components – Lazy Loading, Dependency Injection, Hooks and Much More!
Read more: Angular 17 Standalone Components – Lazy Loading, Dependency Injection, Hooks and Much More!With the latest advancement in the Angular framework ecosystem, we are heading towards a more robust architecture of standalone components which helps to maintain the maximum level of decoupling, reusability, maintainability and ofcource performance.
-
Ruby For Web Scraping: The Ultimate Tutorial
Read more: Ruby For Web Scraping: The Ultimate TutorialRetrieving data from online sources can be done through diverse programming languages, each with distinct capabilities. Ruby is a remarkable selection for web scraping tasks. It is an excellent language for efficiently navigating and extracting information from websites. Web scraping using Ruby is a powerful skill that can unlock a world of data. It ensures…
-
[Angular 16] Show Toastr using Util Service with Ngx-Toastr
Read more: [Angular 16] Show Toastr using Util Service with Ngx-ToastrToastr 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…
-
[Angular] Ngx-Translate – Lazy Loading, Pluralization, Caching, Unit Test, Events and More!
Read more: [Angular] Ngx-Translate – Lazy Loading, Pluralization, Caching, Unit Test, Events and More!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.…
-
[React Js] Open Links, Anchor, Router, PDF in New Tabs
Read more: [React Js] Open Links, Anchor, Router, PDF in New TabsIn this React js tutorial, we will discuss how to open an external URL, an anchor tag with href, open links in new tab programmatically or even a PDF file in a new tab within your React application. We will discuss with the help of simple examples through different methods to open links in new…
-
[Angular] How to Change Startup Component – Dynamic, Runtime Methods
Read more: [Angular] How to Change Startup Component – Dynamic, Runtime MethodsIn Angular, when we create a new project, the App Component is created default as the parent component. In some situations, you may need to change the startup component or root component. The root components can be statically changed or dynamically on runtime based on some logical business behaviours. The startup component is the entry…
-
Dynamically Update Form Control Required Validation in Angular Reactive Forms
Read more: Dynamically Update Form Control Required Validation in Angular Reactive FormsForm Validation in Angular applications plays a very important role to provide a good and smooth user experience. In some situations, we may need to dynamically handle or adjust the validation rules for form controls as the user starts filling out the sections. In this guide, we will discuss the process of how to set…
-
Dynamic Data List Filtering on Click in Angular
Read more: Dynamic Data List Filtering on Click in AngularIn this article, you will learn how to filter a dynamic data list using an Input field only when the filter or search button is clicked. There will also be a reset button to clear the Input control and show all the results. Generally, we create a filter list where the results are filtered live…
-
Python List – Extracting First n Elements with Slicing and itertools Module
Read more: Python List – Extracting First n Elements with Slicing and itertools ModulePython is a popular programming language with popular features in the list of data structures. In this guide, you will learn how to extract the first n elements from a list in Python. For example, we may want the first 3 or first 5 items for processing from a list. In this article, I will…
-
Top Ways to Implement HTTPS in React & Angular Apps
Read more: Top Ways to Implement HTTPS in React & Angular AppsCybersecurity is a top priority for organizations worldwide with increased threats. However, an app’s front end must be secure for better data protection. React and Angular are leading frontend frameworks with a history of vulnerabilities.
-
Angular Material Radio Button – Radio Group Validation in Template or Reactive Forms
Read more: Angular Material Radio Button – Radio Group Validation in Template or Reactive FormsIn this detailed guide, you will learn how to work with Radio button form controls provided by the Material library in the Angular project. We will create forms using Template Driven and Reactive Forms approach and also implement required validation to throw a warning message if the form is submitted without selection. Angular Material Radio…
-
Data Lists in Angular 15 – Add, Remove, Sort, Filter and Server Side Resolve
Read more: Data Lists in Angular 15 – Add, Remove, Sort, Filter and Server Side ResolveData lists are used to list down items that can be of Array or Object type. In this article we will discuss how to list down items and also other operations related to them like: Optimize Data List using trackBy How to get an Index of each data list item? Using an alias with ‘as’…
-
Angular 15 – Hide Routing URL in Browser Address Bar using 3 Methods
Read more: Angular 15 – Hide Routing URL in Browser Address Bar using 3 MethodsIn this tutorial, we will discuss 3 effective methods to hide the address URL change while navigating from one page to another while routing. The methods to hide URL addresses will include the use of skipLocationChange of router service, using the location API and deploying the pathLocationStretegy service of Angular core. One might wonder, why…
-
Angular 13 How to Make REST Search Call using RxJS Debounce ?
Read more: Angular 13 How to Make REST Search Call using RxJS Debounce ?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,…
-
Angular 14 Draggable Grid Blocks using angular-gridster2 Tutorial
Read more: Angular 14 Draggable Grid Blocks using angular-gridster2 TutorialIn 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
Read more: Angular 13 Dynamic FormsGroups using Reactive Form TutorialIn 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…
-
Phone (Mobile) Validation Using ReGex in React Js – StackBlitz Example
Read more: Phone (Mobile) Validation Using ReGex in React Js – StackBlitz ExampleHow 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
Read more: Angular Material 13 Server Side Table Pagination ExampleAdding 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
Read more: Angular 13 Material Dialog Example – Positions, Fullscreen, Events TutorialIn 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…
-
React Fixed Animated Header with Fade and Slide In onScoll Event
Read more: React Fixed Animated Header with Fade and Slide In onScoll EventLearn how to create an on-scroll sticky fixed header with a resizable logo using React JS, CSS animations, and various animation styles for a smooth user experience.
-
Vue – Bootstrap Date & Time Picker Calender Component Example
Read more: Vue – Bootstrap Date & Time Picker Calender Component ExampleIn 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
Read more: Custom Email Validation Regex Pattern in React JsHow 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
Read more: Chrome Styled Color-Picker in React Js ApplicationColour 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…
-
Ionic 5 Range Slider Example – Single, Multiple Markers on Bar with Custom Styling
Read more: Ionic 5 Range Slider Example – Single, Multiple Markers on Bar with Custom StylingIonic 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.…