angular - inDepth.dev

Creating a custom form field control group using Angular Material

In this guide, we will learn that it is possible to create custom form field controls group that can be used inside .

Useful Chrome DevTools techniques when debugging change detection in Angular

In this section I’ll show you how to use the callstack, logpoints, filtering and local overrides tools to track down the cause for unexpected change detection runs.

angular

Required Inputs in Angular v16

Required Input is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

angular

takeUntilDestroy in Angular v16

takeUntilDestroy is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

angular

Router data as components inputs in Angular v16

Router data as components inputs is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

angular

Deep dive into the OnPush change detection strategy in Angular

Angular implements two strategies to control change detection behavior on the level of individual components. Let’s now explore those strategies in greater detail.

angular

Deep dive into the infamous ExpressionChangedAfterItHasBeenCheckedError in Angular

This earticle explores the mechanics of the ExpressionChangedAfterItHasBeenCheckedError and brielfly discusses some common setup that lead to the error

angular

From zone.js to zoneless Angular and back — how it all works

Explore the mechanism behind automatic change detection in Angular with zone.js and use cases when to jump in and out of Angular zone

angular

Change detection and component trees in Angular applications

We can think of an Angular application as a tree of components. Under the hood, for components Angular uses a low-level abstraction called View. In this article we'll take a detailed look how component tree corresponds to a tree of views

angular

Improve page performance and LCP with NgOptimizedImage

Explore mechanisms of NgOptimizedImage directive to improve overall page performance, targeting especially the Largest Contentful Paint (LCP) metric from Core Web Vitals. Enhance pages, make the best user experience and improve the web.

angular

Rendering cycle in Angular applications — browser, angular and zone.js interaction

Modern web stack involves lots of moving parts. Let's take a look at all the actors and their functions in a typical Angular application.

angular

Overview of Angular’s Change Detection operations in Ivy

In this article I want to provide an overview of all operations that Angular runs during change detection in the new Ivy engine.

angular

Component initialization without ngOnInit with async pipes for Observables and ngOnChanges

Explore various techniques to improve initlialization code in components. We will replace the ngOnInit entirely and propose better alternatives. We will cover subscriptions management, and other life cycle hooks, such as ngOnChanges.

angular

External Configurations in Angular

In this article, we will learn about external configurations in Angular.

angular

Complete Guide: Angular lifecycle hooks

In this article, we will take a deeper dive into each lifecycle hook and look at how they're used in Angular.

angular

The controllers of component concept in Angular: part II

The second part of how we organized the system of settings for all textfields in Taiga UI with the power of Dependency Injection in Angular.

angular

Exploring the difference between disabling a form control through reactive forms API and HTML attributes

Having parts of a form disabled is a common requirement for any large application. Sometimes users must be prevented from interacting with a form based on their role in an application.I n this article, we will explore different ways to disable reactive form controls.

angular

Telegraph with RxJS: the power of reactive systems

Explore interesting RxJS code and Angular directives in this fun exercise of recreating an analogue Morse code telegraph using your favorite tools!

javascript

Typesafe code with Immer and where it can help in NgRx

Immer is a tiny library that uses structural sharing and proxy objects to guarantee the immutability pattern in the most efficient way. It's also very convenient when writing reducers to shorten code and ensure type safety.

angular

Tracking user interaction area

Explore one of the most complex pieces of Taiga UI — ActiveZone directive that keeps an eye on what region user is working with. It touches on low-level native DOM events API, advanced RxJS and Dependency Injection, ShadowDOM and more!

angular

Designing Angular architecture - Container-Presentation pattern

Designing architecture could be tricky, especially in the agile world, where requirement changes are frequent. So your design has to support that and provides extendibility without the need for serious modification. In such cases, you will find the Container-Presentation pattern instrumental.

angular

How OOP is mistreated in Angular

Object oriented programming - a word combination instantly recognized by almost every software developer in the world; even the ones who don't use (or even hate) it.

angular

Angular self-saving dropdowns - yet another directive

Use the power of Angular directives to create a reusable self-saving dropdown directive

angular

Leveraging Dependency Injection to reduce duplicated code in Angular

How to eliminate duplicated code when getting route params, query params or data from Activated Route in Angular by using dependency injection.

angular

Craft a complete GitLab pipeline for Angular. Part 2

Learn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This second article focuses on deployment using two methods involving GitLab Registries and Pages. You'll also find docker jobs optimization tips using custom images.