Tiny Angular application projects in Nx workspaces

Let's explore how we can consume diverse Web APIs in Angular application properly by abstracting it into a library built "the Angular way".

How I strongly typed my Angular forms. And you can too using my small library!

Presentational components encapsulate presentation and UI behaviour. They can be stateful or stateless and are connected to the application state through their data binding API.

This article explores the `rxjs-for-await` library by Ben Lesh. Read it to learn about use cases and technical details.

How to lazy load Angular components from a Non-Angular project. Ideal for dynamic websites using CMS platforms.

Learn how to create and consume a custom component harness using Angular CDK. With a step-by-step case study, we run it in unit tests and end-to-end tests.

In this article, you'll learn how to create a library with Angular CLI. Besides, we'll explore how to publish a library and talk about dependencies linking and peer dependencies.

This article describes an experiment that shows why using the SharedMaterial module in all Angular modules is a bad idea that leads to an increased bundle size.

This article explores the patterns in Angular applications that make your code less readable and maintainable, like polluting the ngOnInit or writing useless directive selectors.

Have you ever needed to switch your backend endpoints before building for production? Or has it been problematic to change the endpoint of a resource? It sure happened to me, so I am going to show you how I dealt with this issue. If you just want to browse the final code, you can check it here [https://stackblitz.com/edit/specific-data-services-swqehm]. What is the problem? In our code base we have a general data service, that slightly abstracts the HttpClientService provided by Angular. This

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.

Extract workspace libraries to get tiny Angular application projects. We'll create assets, styles, and environments libraries for an Nx workspace. Step-by-step commands and instructions.

If you’re currently considering adding NgRx to your project, or just want to learn, this piece is going to cover the basics of the flux pattern and how to use it.

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 I want to explain how Angular @Injectable decorator works under the hood and how providedIn property is processed by Angular Ivy.

Module federation allows a JavaScript application to dynamically run code from another bundle/build, on both client and server. This is the JavaScript bundler equivalent of what Apollo did with GraphQL. > A scalable solution to sharing code between independent applications has never been convenient, and near impossible at scale. The closest we had was externals or DLLPlugin, forcing centralized dependency on a external file. It was a hassle to share code, the separate applications were not tru

This article dives deep into techniques to implement Angular View Model as a single observable stream.

An architectural approach to better Angular applications: this article shows you how to keep your Templates declarative and dumb, your Components thin and smart, and your Services fat and happy.

Remember last time you paid on a website with a single touch using Google Pay, Apple Pay or a credit card? Now supposed you need to implement this functionality in an Angular application. Let's see how this can be done.

Angular Ivy makes it pretty easy to lazy load components, but what if we need to lazy load modules. Can we do that? In this article I'll show you why you may need this and how it can be done.

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 will discuss concepts of shell libraries and how they differ. At the end, we will settle on a shell library pattern and discuss under which circumstances it's useful.

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.

This article describes the Initial Null Problem of AsyncPipe and its root cause, and discusses new asynchronous data-binding to solve that.

In this article I'l show you how to use the powers of reactive extensions tin Angular to efficiently work with the state of components in application.

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.

I remember in the beginning of my programming career I read a great book “Code Complete”by Steve McConnell. There I found a very insightful idea: > “Managing complexity is the most important technical topic in software development. In my view, it’s so important that Software’s Primary Technical Imperative has to be managing complexity. We can’t agree more with this statement at ag-Grid [https://ag-grid.com/]. In just 4 years we built the best JavaScript datagrid in the world. We managed to do t

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.

Adding customization to existing RxJS functions.

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.

Do you know the burden of handling your RxJs subscriptions manually? Did you ever forget one? Wouldn't it be nice if we never have to think about subscriptions again? Let's explore the options in this article.

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.

Or how to enliven dead Observables…and why

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

Understanding when and why to use npm peerDependencies In this article I hope to clarify what npm Peer Dependencies are and especially when you should use them. Peer Dependencies are listed in the package.json file in the peerDependencies object. To get the most out of this article you should have at least an introductory understanding of npm [https://www.npmjs.com/]. Contents In this article: 1. We will compare exactly how Dependencies work versus Peer Dependencies. 2. We will look at so

By using Angular CLI, NgRx feature modules and a bit of manual work:-)

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

How to Unit Test @ViewChild using a Stub Component If you have been using Angular for any length of time, you have probably run into a parent component that references a child component using @ViewChild. Unit testing the parent component is trivial, if you just want to include the child component in the test. However, it gets tricky when we want to mock the child component with a stub. In this article we will discuss: * A simple introduction to using @ViewChild * Unit testing your parent co

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.

As much as I like frameworks, I'm also a big fan of the native web platform, especially web components. I look forward to the times when the implementation will be powerful enough to solve the common problems in web development. And we're getting closer. In this article I want to take a look at the most exciting features that soon can be part of the web platform and will make web components a lot more powerful. But before I do that, I want to spend a little time to explain the concept of a pla

Or how the ‘groupBy’ operator works under-the-hood.

An introduction to using enum’s in JavaScript and TypeScript This article is an introduction to enumerated types or enum’s in both JavaScript and TypeScript. Unlike TypeScript, JavaScript doesn’t directly support enumerations. So we will look at a way to get some of the benefits of enumerated types in JavaScript. The Theory In programming languages we typically use enumerations to describe finite sets of discrete values. Discrete Values When we talk about discrete values we mean values that a

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.

A less technical and more conceptual in-depth overview of React Suspense and our mental model of loading states.

> “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

Should Angular CLI options be in camel case or in kebab case? Angular CLI supports options for commands. For example: ng build --prod But, for these options should we use camelCase or kebab-case? Well, it turns out that the Angular CLI documentation is rather ambiguous about how you should write these command line options. In this article we will try to sort out this inconsistency and also have a little fun while we are at it. Because hey! How often do you get a chance to read an article with

> 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-depth/how-to-read-the-rxjs-6-sourc

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.

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

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.

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.

Configuring Angular CLI to leverage Headless Chrome for Unit and E2E tests Headless Chrome [https://developers.google.com/web/updates/2017/04/headless-chrome] is a useful tool for running automated tests in environments where it isn’t practical to actually launch a browser. In this article we explain how to configure Angular CLI [https://github.com/angular/angular-cli/wiki] to run your Unit and E2E Tests using Headless Chrome. This will become important for our upcoming set of articles in The

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

In this article I"ll show you how to leverage Angular application environments to pass configuration settings to your application.

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.

Official Angular documentation states that to bootstrap an application you have to put the following in the main.ts file: platformBrowserDynamic().bootstrapModule(AppModule); The first part of the statement platformBrowserDynamic() creates a platform [https://angular.io/api/core/PlatformRef]. Angular docs describe the platform as: > the entry point for Angular on a web page. Each page has exactly one platform, and services (such as reflection) which are common to every Angular application run

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.