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.

A high-level organization of a weather app using API from the tomorrow.io

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

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

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

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

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.

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

Over the years inDepth.dev has helped millions of people — YOU CAN HELP us now! Every dollar counts.

At inDepth we strongly believe that writing technical articles is one of the most effective ways to learn a topic at a deeper level. Investing your time and effort into acquiring valuable knowledge and sharing it with peers is the most rewarding path to professional growth.

This article will show you how to patch `jest-worker` package used by Gatsby.js and by patching enable child process debugging using Chrome Dev Tools.

Dive deep into React's new architecture called Fiber and learn about two main phases of the new reconciliation algorithm. We'll take a detailed look at how React updates state and props and processes children.

Have you ever wondered how is it possible to import CSS into JavaScript files? In this article I'll show you how Webpack does it by transforming your CSS styles into JavaScript.

In this article we'll explore internal architecture of Git step by step using practical exercises. We'll see how Git stores content, what is a tree object that underlies a commit and how a branch is just a text file.

In this article we'll build a very primitive plugin for Webpack and then I'll show you how to find out if this plugin triggers error by debugging Webpack build.

In this article I explain the idea of recursion and show where it could be helpful. Then I proceed to introduce and explain a number of topics and ideas that will help you when practicing recursive problems.

A light introduction into DOM fundamentals through an insightful quiz. You'll learn how HTML is transforms into JavaScript objects to eventually become part of the Document tree.

A deep dive into ECMAScript (JavaScript) specification and internals of TypeScript compiler. In this first part I'll explore lexical grammar and explain TypeScript's scanner implementation details.

We start with the comparison of dynamic components functionality in Angular and AngularJS and then continue with main concepts that enable dynamic components to you an extensive overview of the dynamic components functionality in Angular.

The article explores common elements used for DOM manipulation in Angular with a particular focus on ViewContainerRef. Learn why they are needed, how they work and when you need to use which.

An in-depth look at why and how we implemented Dependency Injection (IoC) Container in ag-Grid. In the article I also explore the benefits DI brings in web development.

The main idea is to review patterns and techniques that we use under the hood to build the fastest datagrid while also providing ample customization opportunities. Since ag-Grid is open source, you can follow along by exploring source code on github when I link to it.

 I'll go over a developments in Web Components I’m excited about in 2019.

This is the story behind AngularInDepth and inDepth.dev. It recounts obstacles I’ve gone through, emotions I had to face, people who helped me and lessons I’ve learned along the way.

This article uses a basic setup with a parent and children components to demonstrate internal processes in Fiber architecture React relies on to propagate props to child components.

This article describes the use case that results into common ExpressionChangedAfterItHasBeenCheckedError and uses it to explore change detection mechanism and related internal implementation details in depth.

This article uses NgDoCheck and AsyncPipe to dive deep into manual control of change detection in Angular and explains what effect each method can have on performance.

Dive into change detection by learning the problems it solves and studying basic implementation with browser API. Then go through implementation details of change detection in Angular and React for complete understanding.

This article explores the main the work loop in React’s new reconciler implementation called Fiber. It compares and explains the differences between browser's call stack and the implementation of the stack in React's Fiber architecture.

This article demonstrates on practice how to apply guidelines and principles of successful reverse-engineering to break down and understand React's fiber functionality from the ground up.

This article explains the reasons to start reading sources. It describes the knowledge and tools you need to do it successfully. And it also outlines a structured process to start reverse-engineering.

This article dives deep into mechanics of @Host decorator in Angular. It introduces rarely seen notion of Element Injector and shows how it's used alongside the decorator to retrieve dependencies.

This article discusses locality and tree shaking as a driving factors for the introduction of Ivy. It then continues to shed some light on the new runtime, compilation and change detection processes.

This article explains a clever optimization techniques that could be applied to scenarios where ngFor is commonly used. You'll learn what is an embedded view and how to re-use it instead of destroying on each iteration.

Here I’ll dig deeper into internal mechanics of the HttpClient service and interceptors in particular.

Do you know if Angular first checks siblings of the current component (breadth-first) or its children (depth-first)? This article demonstrates that the answer depends on what operations of change detection you consider.

In this article you'll find dynamic visual explanations for the most popular RxJS combination operators such as mergeMap, forkJoin and others. The article also describes use cases and termination conditions for each operator.

In this article I'll explain in great detail why 0.1+0.2 IS NOT equal to 0.3. We'll dive into the mechanics of floating points, explore how numbers are stored according to IEEE754 and learn some binary math.

This article explains the essence of unidirectional data flow in view layer in Angular. It also describes the difference between unidirectional data flow in service and view layers.

This article explains why and how Angular implements NgZone over zone.js library. Read to learn how the framework can be used completely without zone.js and when automatic change detection can fail.

This article is a list of articles related to change detection that you need to read to become an expert in change detection. It also offers an extra list of articles aimed at dispelling common confusions.

This article explores the difference between Constructor and ngOnInit lifecyle method in Angular. We'll explore JS/TS language nuances, the component initialization process and how both are supposed to be used.

From the article you'll learn about public API zone.js exposes and the mechanism of task association. You'll become familiar with interception hooks that can be used to track events and measure time.

Dive deep into the implementation details of the ControlValueAccessor that acts as a generic mechanism between Angular’s formControl and a native/custom form control and learn how it works and how to use it correctly.

This article explains how pure Angular pipe is related to pure functions, what advantages pure pipes brings and how it's implemented under the hood.

In this article I'll explain in great detail when is ngDoCheck triggered which will make it clear why ngDoCheck lifecycle hook is still triggered for a component that implements OnPush change detection strategy.

The article dives deep into inner implementation of module system in Angular. Then the author uses the discovered knowledge to shed light on common confusions related to Angular modules.

This articles explores in-depth the mechanism of forwardRef, explains what it is and how it works and shows why often it's redundant. Read this article to learn where to use forwardRef correctly.

How can you bootstrap the application later when you get this information? As it turns out it’s a pretty straightforward process.

This article explains the underlying causes of the error and the mechanism by which it’s detected, provides a few common patterns that may lead to the error and suggests a few possible fixes.

This article takes a close look at one of the main operations during change detection - bindings update. You'll learn what internal structures are used to update props on directives and DOM elements.

In this article you'll learn how Angular represents components and directives under the hood and will become familiar with the notion of a directive definition.

DOM updates is part of Angular’s change detection mechanism. This article explores how the rendering part of change detection works and introduces the UpdateRenderer function.

ViewContainerRef can usually only be used after ngAfterViewInit hook. This article shows how to get access to ViewContainerRef earlier using a directive instead of template reference and ViewChild query.

Let's take a look under the hood of the component decorator mechanism in Angular. We'll learn how it works in JavaScript, why Angular uses it and how to implement a custom one.

Web developers need to debug a lot. In this article I'll demonstrate the approach I use when debugging source code in IDE and a browser console. We'll also look at debugging API provided by Angular.

From this article you'll learn how to use APP_INITIALIZER token and bootstrapModule to hook up into Angular's initialization process.

ES6 introduced a new iteration mechanism for traversing data and corresponding protocols that define a uniform approach to iterating structures in JavaScript. This article describes it.

From this article you'll learn how digest loop from AngularJS evolved into change detection mechanism in Angular. I'll explain why digest was needed in the first place and lifecycle methods correspond to the watch function.

Here we review in great details all operations performed by Angular during change detection, explore implications and take a close look at change detection API in the form of ChangeDetectorRef.

This article explores in depth essential TypeScript configuration options. We'll learn how to configure input and output files location, file types, transpiling and module resolution process.

We are all familiar with rounding numbers in decimal system. This article will teach you how to round binary numbers and explain the math behind it.

Usually signed integers are stored as two’s complement. However, exponent in IEEE-754 floating point standard is stored as offset binary. This article explains the inner workings of this mechanism.

This article explains the very basic math behind four simple algorithms to convert binary to decimal: two for integer and two for fractions.