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

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 […]

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

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

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

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

Ruby For Web Scraping: The Ultimate Tutorial

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

Ruby For Web Scraping: The Ultimate Tutorial Read More »

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

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

[Angular 16] Show Toastr using Util Service with Ngx-Toastr 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.

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

[Angular] 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

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

Dynamically Update Form Control Required Validation in Angular Reactive Forms

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

Dynamically Update Form Control Required Validation in Angular Reactive Forms Read More »

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

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

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

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

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

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