A look at major features in the Angular Ivy version 9 release

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.

Learn how to boost your Angular application speed by selectively reacting to performance sensitive events. To do that we'll implement a few event plugins and simplify them with decorators.

I'll give an advice on how approach typing in TS and show tricky examples using TS where wrong assumptions might lead your to errors. We'll also explore the connections between types along the way.

This article is a must-read to understand accessibility and how to work with it in Angular. l'll focus on 11 things you can do to make make your Angular app more accessible

I keep being surprised by how reactive Svelte feels. In this article, we take a glance at the Svelte internals to see how Svelte accomplishes this. This is important if we want to use RxJS in Svelte.

In this article we'll explore when and why Angular creates two instances of the same service and what solutions exist to ensure a service remains a singleton in the entire application.

After delving into the @angular/forms package I've been able to get a better understanding of how things really work under the hood. In this article I'd like to share my vision with you. Contents * Base entities [https://indepth.dev/a-thorough-exploration-of-angular-forms/#base-entities] * ControlValueAccessor [https://indepth.dev/a-thorough-exploration-of-angular-forms/#controlvalueaccessor] * Connecting FormControl with ControlValueAccessor [https://indepth.dev/a-thorough-explorat

In this post, we are going to understand how the HttpClientModule actually works behind the scenes and find answers to some questions that might have arisen while using this module. Content * Setting up [https://indepth.dev/exploring-the-httpclientmodule-in-angular/#setting-up] * What is HttpClientModule? [https://indepth.dev/exploring-the-httpclientmodule-in-angular/#what-is-httpclientmodule] * Let's start exploring 🚧 [https://indepth.dev/exploring-the-httpclientmodule-in-angular/

Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.

To give a little background, at work we're creating an application to schedule the daily rounds of caregivers. This is done in a one-week calendar view for multiple caregivers, typically between 20 and 50 caregivers are being scheduled at the same time. In the calendar view, we have a row for each caregiver, and there's are columns that represent each day of the week. If everything is loaded, we speak about more than 1.500 items in total on the calendar. Besides the calendar, there are several

Angular 9 Ivy provides us with a few more options when defining Provider Scope. In this article we will see why 'root' is not sufficient and how the new value 'any' can help.

In this article I'll explore the mechanics of template checking in Angular. We'll become familiar with ElementSchemaRegistry, its implementations like NO_ERRORS_SCHEMA and its usages.

AOT everywhere, dynamic globalisation, strict mode, Bazel, and much more.

In this article you'll know how to incorporate a single Angular component inside a page using Angular elements. We'll explore how this works in great detail and how to debug the application with Web Components.

AOT, faster tests, stronger types, and component harnesses.

2020 is the year you can help the Angular ecosystem thrive.

How to respond to Angular Ivy in 2020/2021 if you're a library author.

The createAction creator function opened opportunities in the NgRx world. With it came two other creator functions, createReducer and createEffect. Let's take a look at what's so special about it and why it's important.

In this article, we'll iterate over an implementation to introduce multiple independent instances of a NgRx store slice. In an application, these instances can be represented by a tab-like interface. To come to a solution we'll use the Angular Router, NgRx Effects, and NgRx Router Store.

A Static Site Generator is the best way to create blog posts or portfolios. We can quickly set up a blog and deploy it to any cloud provider like Netlify. An important question is what does SSG do?

We have collected the top 15 Angular INDEPTH articles of 2019.

The Angular Ivy runtime introduces a new concept called component features. Component features are mixins for components. They add, remove or modify traits at runtime.

Learn how you can handle dynamic items size for Angular CDK virtual scroll by providing your own VirtualScrollStrategy.

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.

This post is going to cover how to build an Angular Project with P5JS. I’m going to walkthrough creating a basic sketchpad, and also discuss some cool things that you can do in your own applications.

The Angular 9 RC is out, what an exciting time to be Angular developer, no I am not saying this because of Angular 9 RC release. It's because Ivy is here, Ivy is now the default rendering engine in Angular.

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.

As an Angular Developer, we often focus on using the overall framework. This isn’t wrong since Angular was designed to have a uniform method of building great applications. But let's see the Angular tools you should be aware of.

Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports. Let's see how we can achieve this without writing any code.

Today, I'm taking you along for a journey in game development. We are making it with the classic game of Tetris. We are going to touch upon concepts like graphics, game loops, and collision detection. In the end, we will have a fully functioning game with points and levels. I hope you come back if I let you try out the game: Play the game! [https://focused-mestorf-930f82.netlify.com/] The code for the finished game is on GitHub [https://github.com/melcor76/ng-tetris]. Tetris Tetris was create

Building a robust component architecture.

We got many new features with the release of Angular 8, Angular 9 will be released around November 2019. There are a lot of interesting things happening after Angular 8 was released in May, we have Ivy as default, ng deploy is officially support by CLI and many more.

This article will teach you what you need to know to successfully implement multi-language Angular applications rendered server-side.

This article describes my experience tuning up angular application using a few common and a few lesser known techniques related to change detection. Doing so helped me learn how change detection in Angular works under the hood.

Ivy engine has brought (and also will bring) a huge amount of new features. Honestly, I always dreamed of having an opportunity to load modules asynchronously, and most importantly, components, you can do that with one line of code in Vue: Vue.component('lazy', () => import('./lazy.component')); For sure we could lazy load any non-routable module by adding it to the lazyModules property in the Angular’s config and then override NgModuleFactoryLoader token with SystemJsNgModuleLoader, but thi

Builders API is released with Angular 8, and it offers a functionality where you can override commands as ng build,ng test and ng lint . Not to be confused with Angular Schematics here, by using which you can add your own commands for ng generate commands or provide support for ng add .

Let's explore how to implement our own Event Manager Plugin to optimize event handling. Then I'll show how to use it to automatically prevent default action and event propagation.

In this post I will be building out an API with Google’s Firebase. I will be building out the back-end with Firebase Cloud Functions and ExpressJS.

Creating framework-agnostic components with Angular Elements In this article, I use Nx to create a monorepo with applications in Angular and React, and a library with Angular Elements. Then we consume these custom elements and communicate with them in our apps. Here’s what we create in this article: The application we create has one page for Angular and one for React. The add button and shopping cart are Web Components made with Angular Elements. There is no state between the pages. The ma

The things you may not pay attention to but they are good to know.

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Artic

The Angular framework was designed with flexibility in mind. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices are possible. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Artic

In this article we'll explore how Angular type-checks templates, review the difference between View Engine and Ivy type-checking and break down the process of finding and understanding generated type-checking code.

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Articles: *

Small gotchas from my (and not only my) Angular experience.

Refactoring the zippy application using SCAMs.

Cypress is an Open Source JavaScript testing framework. Cypress enables e2e, integration, and unit tests in your projects. The e2e features of Cypress are what get the most attention currently, because of both the quality of the experience and the large amount of benefits it provides.

Or how my dreams of writing a game started by animating a square block I love playing games. And I love coding too. So, one day, I got thinking, why not use those coding skills to make a game? But it sounds hard. How would one even get started? > With baby steps. First, we need some 2D graphics. In this case, it’s moving some blocks on the screen. So, in this article, I will show how to draw and animate objects using the HTML5 Canvas [https://www.w3schools.com/html/html5_canvas.asp] and Java

In this blog, let’s see what we should expect from the Angular 8 release. This post will cover some hot topics covered at ngConf and Google I/O 2019. So if you missed both events, do readon to have an idea what features your favorite framework is going to offer you. This blog is co-written with Roman Yavoriv [https://medium.com/u/2fd215b5b80a?source=post_page-----1bf187c8f0bf----------------------] . Introduction I am sure you are also excited the same way I am after NgConf 2019, and eagerly aw

When web applications are properly designed and coded the users of assistive technologies can use them easily. However, we’re not always paying enough attention to the a11y issues. One of the reasons is that it may require significant efforts to make applications accessible. Luckily, there are tools that can speed up a11y development for our Angular applications. A number of powerful tools are distributed within @angular/cdk package. One of the issues the Angular CDK can help us with is keyboa

In the process of building my application, I used Firebase Cloud Functions that are called by triggers in the Firebase Cloud Firestore. Basically, whenever a record is written to specific collections in my app’s Firestore, the Cloud Functions trigger Slack notifications.

In this post, I’m going to define what a JAM stack is and walk you through how I used it to build a learning app recently. I’m going to showcase a few key areas where the JAMstack greatly improves the development experience, and takes a lot of the work out of maintaining applications.

Create components and directives for manual tests.

Learn the ins an outs of Angular dependency injection in automated tests.

Automate component library releases through commit conventions Release new versions of your code using tools like Lerna and Commitizen. By using commit conventions we can automate the versioning and get great looking changelogs. Scenario: We need to release component libraries to npm because we want to consume them inside our Angular applications. We want to be able to release the components independently. Furthermore, we have some dependencies between the libraries. Does this sound complicat

The first Angular In Depth conference is coming up.

By visualizing your UI component library both developers and designers become more productive. In this article, I first describe how to build a component library with Angular CLI. After the library is done, I write some stories in Storybook to test and document the UI components. Storybook [https://storybook.js.org/] is a UI component explorer [https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a] that visualizes components in different states. Storybook en

NgRx is an open source library that provides reactive state management for your Angular applications. Inspired by Redux, NgRx provides a way to maintain...

Should these states be part of NgRx Store to begin with? TL; DR: It depends… However, we’ll look into the pros and cons of different approaches. If you chose to make the loading/error as part of the state, make sure they are encompassed within a single property. Does handling multiple interconnected properties that represent the same AJAX call ✨spark joy✨? If not, then it’s time to let them go and use a single property insteadNot so long ago Michael Hladky started a very interesting discussion

Find out which superpowers you can start using today > Just like Batman develops his gadgets we can use interceptors to gain superpowers. There are many ways to use an interceptor, and I’m sure most of us have only scratched the surface. In this article, I will present my ten favorite ways to use interceptors in Angular. I have kept the examples as short as possible. And I’m hoping they will inspire you to think of new ways to use interceptors. This article is not about teaching interceptors

A short while ago I published an article [https://blog.angular.io/nebular-meets-angular-cdk-b83fc921d6b2] about the integration of Angular CDK in Nebular [https://github.com/akveo/nebular] — full-featured library for Angular applications we’re developing at Akveo. During the development, we’ve faced a bunch of interesting puzzles that Angular CDK has helped us to overcome. That’s why I decided to start a series of articles on challenges Angular CDK may aid you with. To start with, let’s build

NgModule is arguably one of the most confusing Angular concepts.

The following post is going to give a high level view of the AngularFire library, and how it works under the hood. I’m going to walkthrough a simple grocery list app I wrote, and show how using AngularFire makes things seem to work like magic.

> “To expect the unexpected shows a thoroughly modern intellect.” — Oscar Wilde This article is about centralizing error handling in Angular. I discuss some of the more common topics such as: * client-side errors * server-side errors * user notification * tracking errors I present some code snippets during the way and lastly provide a link to the full example. Spanish version: * Esperando lo Inesperado — Buenas prácticas para el manejo de errores en Angular [https://medium.com/

Tree-shakable dependencies are easier to reason about and compile to smaller bundles.

This article explains the difference between applying an asyncScheduler as an argument and passing it to the observeOn operator

Ghosts appear and fade away (渋谷)> This series is just my notes as I read through the RxJS sources. I’ll provide a summary of the main points at the end of the article, so don’t feel too bogged down with the details. Welcome back. Today I’m very excited, because I’m finally going to dig into how pipe is implemented in RxJS. This article will start with an overview of how map and pipe work, and then will delve into the RxJS sources. Previously In the last article [https://medium.com/angular-in-de

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.

If you’ve done anything in web development in the past year, you’ve undoubtedly heard of CircleCI and Firebase.

With PR #25740 [https://github.com/angular/angular/commit/b7baf632c0161692f15d13f718329ab54a0f938a] all navigations performed by Angular’s router are merged into a single, observable stream. There can also be only one active navigation at any time. This provides the benefits of making navigations faster and more predictable. Although these changes are mostly internal, they do affect how we should think about navigations and routing in our applications. > This is a major refactor of how the rou

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.

Some new features have been added to the Angular Router with version 7.1.0 [https://github.com/angular/angular/commit/bf71b107b3227e183f96b991700fbaeb8337ef2f] : * Router guards can now return a UrlTree. This allows a guard to cancel the current navigation and redirect to the URL represented by the UrlTree. * There is now a notion of “guard priority”, which is used as a tie-breaker when multiple guards return a UrlTree during a single navigation. * A new configuration option for runGua

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.

Learn tactics for testing RxJS observables and application state commands. Opt out of Angular testing modules for blazingly fast unit tests.

Lazy load your locale when changing countries. The other day I read Using TypeScript Dynamic Imports in Angular [https://netbasal.com/using-typescript-dynamic-imports-in-angular-d210547484dd] by Netanel Basal [https://medium.com/u/b889ae02aa26] where he says: > TypeScript 2.4 added support for dynamic import() expressions, which allow us to asynchronously load and execute ECMAScript modules on demand. This sounded like something I had to try! I already had the perfect use case from my pr

Container components are extracted from mixed Angular components to increase the maintainability, testability and scalability of our Angular apps.

Dust off the history books and discover the origins of the MVP pattern.

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.

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.

Lazy loading is a useful technique for faster initial page loads. With lazy loading, your application loads faster by shipping only the essential startup code to the browser. Other code is placed inside of feature modules, which are loaded on demand. The basics of how to use lazy loading is explained well in the official docs [https://angular.io/guide/lazy-loading-ngmodules]. In this article, we’ll go under the hood and check out how the router implements some parts of lazy loading. Topics 1

Manage complex Angular applications with the MVP design pattern.

RxJS is my favorite library. I love how observables offer a declarative, composable twist on async (and sync )programming. Now that I finally understand how to model events as streams, I don’t ever want to look back. For me, RxJS is just downright fun. But the sources have always remained something of a mystery to me. I’ve written a small series on how to build your own observable [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] from scratch. If you want to un

Routing is essential for any frontend framework or library. It makes single page applications possible by letting us load the application once, and display different content to the user through client-side routing. It’s easy enough to get started with Angular’s router, but have you ever wondered what really happens when you click a link in an Angular application? In this article, we’ll answer this question and more. A lot of insight into Angular can be gained through an understanding of the rou

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.

Welcome back. In the previous article [https://indepth.dev/building-your-own-observable-part-3-the-observer-pattern-and-creational-methods/] , we looked at RxJS’s take on the Observer pattern, and created our simple Observable class. We also added some functions for creating observables from data streams, such as of, from, and fromEvent. If you’re new to this series, I recommend familiarizing yourself with the previous installments: * Part 1: Arrays [https://indepth.dev/build-your-own-observab

You can play around with the above ROUTES at this stackblitz. [https://stackblitz.com/edit/router-pillar1-demo-final] Our first task is to understand how the router handles URLs internally. -------------------------------------------------------------------------------- Urls and UrlSegmentGroups Let’s start by understanding the different parts of a URL, and how they are represented internally by the router. Consider the following simple URL: In the introductory article for this series [htt

In this short article, we’re going to explore secondary outlets [https://angular.io/guide/router#secondary-routes] (sometimes called named router outlets), and see the role they play in routing. By the end of this article, you will understand: * how to define secondary outlets * why secondary outlets are used * the effect that they have on the structure of a URL * how they are routed and activated Creating Secondary Outlets As discussed here [https://indepth.dev/the-three-pillars-of-angula

The Angular router [https://angular.io/guide/router] is a marvel of software engineering. From handling application navigation to enforcing route guards and facilitating lazy loading of modules, Angular’s router is indispensable for most applications. However, for many developers, the internal workings of the router remain a mystery. This series aims to change that, by giving you, the developer, a deeper understanding of the router. This introductory article will provide an overview of the route

In this article we'll see how to share Angular library with the world by publishing it on npm. We'll review how to name the library, specify its version and what to do with read-me and license Files

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.

Welcome to part 3 of the series [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] . In this installment, we’re going to look at RxJS’s take on the Observer pattern, and start implementing an observable from scratch. Our humble Observable will be nowhere near as sophisticated as what’s going on inside of RxJS, but it will give you a good enough understanding of observables so that you can start digging into the RxJS source code [https://github.com/ReactiveX/rxjs]

Welcome to part 2 of this series on building your own observable. If you haven’t already checked out part 1 [https://medium.com/@natelapinski/learning-observables-part-1-arrays-14480816eb61] of this series, please do so. It covers a lot of foundational material on Arrays that will come in handy here. In this short article, we’ll spend a little more time building up an intuition for what observables are, and why we even need them in the first place. With the proper background and mindset, the c

Angular uses RxJS observables. I can’t understand something until I create it with my own hands. Perhaps you are the same. Either way, let’s build an observable from scratch! When I first started working with RxJS, I didn’t know what I was doing. Now, I’m able to solve problems using observables, and I can even read the RxJS sources with confidence. It’s definitely something you can do too. The only catch is, to understand observables, you have to first understand arrays. Arrays We’ll see pre

You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action.

In this article we will explore what happens when we build our library, package our library using npm pack. We'll also see how to actually use our library in a separate application.

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 takes a close look at what happens when you run "ng new", explores the notion of a workspace and library modules and shows how they can be used in Angular application.

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.

Dive deep into internals of the HttpClient's interceptors mechanism. We'll build middleware chain for interceptors from the ground up and explore observable stream of HttpEvents and the need for immutability.

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.

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.

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.

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.