Creating a Utility Method in Angular to List Form Controls and Log Their Values

by

Working with reactive forms in Angular is an integral part of creating robust and user-friendly applications. Often, developers need to debug their forms by listing all form controls and their corresponding values. Instead of manually iterating through controls every time, we can create a reusable utility method to make this process efficient and clean. In … Read more

Using Deferred Views in Angular 17 with @defer, @placeholder, @error, and @loading

by

Angular 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 the opening scene. That’s what happens with traditional web apps, loading all content upfront. But what if you could load only what’s needed, when it’s needed? That’s the magic of lazy loading.

Read more

Ruby For Web Scraping: The Ultimate Tutorial

by

Retrieving 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 … Read more

[Angular 16] Show Toastr using Util Service with Ngx-Toastr

by

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.

Read more

[Angular] Ngx-Translate – Lazy Loading, Pluralization, Caching, Unit Test, Events and More!

by

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.

Read more

[React Js] Open Links, Anchor, Router, PDF in New Tabs

by
Open Links, Anchor, Router, PDF in New Tabs React js

In 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 tabs in React.js.

Read more

[Angular] How to Change Startup Component – Dynamic, Runtime Methods

by
How to Change Startup Component - Dynamic, Runtime Methods

In 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 point of the Angular application and its first component which is presented to the viewer when the application loads. In this article, we will walk through the ways using which you can easily change the startup component of your Angular project statically or dynamically on runtime with examples.

Read more

Dynamically Update Form Control Required Validation in Angular Reactive Forms

by

Form 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 and reset the required validation on Angular form controls by using the Reactive approach. We will create a simple yet useful example to demonstrate the dynamic control validation riles within the Angular Reactive forms.

Read more

Dynamic Data List Filtering on Click in Angular

by

In 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 as the user types in the Input control that is triggered on key press events. But sometimes, we may require a feature where the data list needs to be filtered only when a user clicks on the Filter or Search button or it can be a predefined filter selection like Radio buttons.

Read more

Python List – Extracting First n Elements with Slicing and itertools Module

by

Python 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 show you how to easily extract the first n elements from a Python list using slicing and the itertools module.

Read more

Angular Material Radio Button – Radio Group Validation in Template or Reactive Forms

by

In 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 Buttons are based on HTML native elements <input type="radio"> but have added features, theming options, and accessibility enhancements. The Radio controls are used in situations where only a single value out of options needs to be selected.

Read more

Data Lists in Angular 15 – Add, Remove, Sort, Filter and Server Side Resolve

by

Data 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’
  • How to Filter/ Search Data List?
  • Lazy loading of Data list items with resolve
  • Ways to refresh the data list
  • Animating list items when added or removed

Read more

Angular 15 – Hide Routing URL in Browser Address Bar using 3 Methods

by

In 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 to hide the routing URL? The reasons could be anything and depend on application feature requirements.

In some situations, the URL can have a number of query params, which are not relevant to the user, so it’s better to represent a clean URL structure and at the same time provide a cleaner user interface to enhance the security of the application, hiding the URL can be advantageous in various scenarios.

Read more