Testing Angular routing components with the RouterTestingModule
This article teaches us about shallow and integrated routing component tests. The RouterTestingModule is useful for integrated routing component tests. To learn what the RouterTestingModule does, we discuss the Location service and its dependencies.
Presenters with Angular
Learn how to extract presenters from presentational components. We discuss stateful and stateless presenters, component-to-presenter ratios and when to use a component or a pipe instead of a presenter.
How to set up an Nx-style monorepo workspace with the Angular CLI: Part 5
In the final part of this tutorial, we create the seatmap data access, seat listing feature, shared buttons UI, and shared formatting utilities library. Finally, we compare our approach with the full Nx toolchain.
Implement file upload with Firebase Storage in our Angular App: The simple way
In this article, we'll cover the feature of uploading files to a Firebase Storage Bucket using Firebase Storage [https://firebase.google.com/docs/storage] and Reactive Forms [https://angular.io/guide/reactive-forms] in Angular. You'll get the best learning experience out of this article, if you have a basic understanding of Angular, Angular Material and Firebase is relevant. If you already took some steps inside Angular development together with Angular Material and like to know more about it,
How to set up an Nx-style monorepo workspace with the Angular CLI: Part 4
In Part 4 of this tutorial, we create the check-in data access and check-in feature shell libraries. We create the check-in desktop application, review and verify how much our tool automated and finally create the mobile check-in application.
Implementing shared logic for CRUD UI Components in Angular
In this article, we describe our approach to creating an Angular library for CRUD UI components. We derive the UI components from an abstract base class containing shared logic.
Under the hood of the Angular Compatibility Compiler(ngcc)
In this artice, we will explore how angular makes non Ivy libraries compatible with Ivy libraries using its compatability compiler ngcc
How to set up an Nx-style monorepo workspace with the Angular CLI: Part 3
In Part 3 of this tutorial, we create the passenger info and flight search feature libraries. We use the generate project tool to create the mobile booking application and its test project. Finally, we create a mobile version of the flight search component template.
How to cancel a component event from output properties in Angular
Sometimes a component needs to raise an event to the parent component to notify them of action e.g., click. In this post, we will examine how a parent component can cancel or prevent a default action from taking place.
Complete beginner guide to publishing an Angular library to npm
In this article, I will be sharing my experience of publishing my first Angular library to NPM. This post will cover steps right from creating the library to detailed NPM publishing steps.
A gentle introduction into tree shaking in Angular Ivy
In this article I am going to explain how tree shaking happens in Angular Ivy. I will briefly explain the tree-shakable concept and how Ivy achieves it and then jump into an example.
How to set up an Nx-style monorepo workspace with the Angular CLI: Part 2
In Part 2 of this tutorial, we'll set up our custom generate project tool and create the shared and booking data access libraries with NgRx. To honor the flow of dependencies, we extract a shared environments library.
How to set up an Nx-style monorepo workspace with the Angular CLI: Part 1
In this step-by-step tutorial, we set up an Nx-style monorepo workspace with the Angular CLI. In this first part, we create an application project, an end-to-end test project, and a feature shell library.
Code-sharing made easy in a full-stack app with Nx, Angular, and NestJS
In this article, we'll combine Angular and NestJS while building a journal app and learn how to take advantage of code sharing in a Nx monorepo
An in-depth overview of Angular compilers
We'll look at ngtsc, explore template and decorators compilation process and learn a few things about Angular compilers design principles.
Create your Angular unit test spies automagically
Creating a mock for unit testing is both necessary and tedious. Let's try and automate that away.
Angular CLI flows. Big picture.
Builders, custom typescript transformers, custom tslint rules, schematics — how not to be overwhelmed and lay it all out in your head? This article intends to lay it out for your.
Building and consuming Angular Elements as Web Components
In this article we'll explore building and bundling Web Components in Angular, approaches to consume Elements that has been enabled by Ivy and some limitations.
Simplifying Web Components usage with Angular Elements
In this article we'll explore what are web components and why we care, their use cases and how/where Angular Elements comes into play.
Automate Angular Application Deployment via AWS CodePipeline
In this article, I will show how to automate your deployment of the angular app to AWS S3 [https://aws.amazon.com/s3/] service by creating a pipeline on AWS Codepipeline [https://aws.amazon.com/codepipeline/] service or in short we will do CI/CD for an angular project. In Case, you are wondering what are these AWS services, AWS Codepipeline AWS CodePipeline is a fully managed continuous delivery service that helps you automate your release pipelines for fast and reliable applications. Read more
The difference between the canActivate and canActivateChild guards
canActivate > Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled. If any guard returns a UrlTree, current navigation will be cancelled and a new navigation will be kicked off to the UrlTree returned from the guard. The canActivate guard decides if route can be navigated to, which results in the creation of the route's component. To implement the gua
How to not create your RxJS Observables
Last week a friend and college of mine was stuck with a problem. An NgRx effect was subscribed to a stream of WebSocket messages, but the effect didn't receive any messages. Though, we saw that the server was sending them and that they reached the client. The problem wasn't the Effect, but the WebSocket stream that was wrongfully initialized. The use case was to only establish the WebSocket connection for the users that had enough permissions to start a process. The WebSocket was created to re
Angular Forms: Useful Tips
This article gives you a number of useful tips when working with Angular forms.
Understanding the magic behind @ngrx/effects
This article dives deep into internals of ngrx/effects class. It explains how entities are put together and how this module is tied to ngrx/store.
Angular with Ivy - Build performance review
We're going to dive into bundle-size and compilation speed insights. Was Ivy project worth waiting for?
Switch themes like a fox based on Ambient Light in your Angular Apps
Learn how to automatically change themes with the change in ambient lighting conditions in your Angular App. Here's a simple, step by step, and easy to follow article for beginners.
Let's implement a Theme Switch like the Angular Material Site
Learn how to implement a Theme Picker from scratch, for your Angular App. This is a beginners guide and you'll get to know the best practices you should follow along the way.
Implement Google Sign-In(OAuth) in your Angular App in under 15 minutes
Learn how to implement Google Sign-In in your Angular App in under 15 minutes. We'll build an App with routing and Firebase Authentication and follow all the best practices while doing it.
Understanding the magic behind StoreModule of NgRx (@ngrx/store)
In this article we're going to dive deep into the internals of @ngrx/store package. We'll examine how state, reducers, store and actions work with each other and where meta reducers fit in.
What makes a good Angular library
Let's explore how we can consume diverse Web APIs in Angular application properly by abstracting it into a library built "the Angular way".
Angular Forms Story: Strong Types
How I strongly typed my Angular forms. And you can too using my small library!
Presentational components with Angular
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.
Lazy loading Angular components from Non-Angular applications
How to lazy load Angular components from a Non-Angular project. Ideal for dynamic websites using CMS platforms.
Create a component harness for your tests with Angular CDK
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.
Create your Standalone Angular Library in 10 minutes
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.
Stop Using Shared Material Module
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.
Angular Bad Practices: Revisited
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.
How to use the environment for specific HTTP services
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
Tiny Angular application projects in Nx workspaces
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.
Adding NgRx to Your Existing Applications
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.
A Deep Dive into @Injectable and providedIn in Ivy
In this article I want to explain how Angular @Injectable decorator works under the hood and how providedIn property is processed by Angular Ivy.
Angular: the viewmodel of a component as an Observable
This article dives deep into techniques to implement Angular View Model as a single observable stream.
Angular: Keeping it Fat, Dumb, and Happy
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.
Declarative internet shopping with Payment Request API and Angular
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.
Lazy loading Angular modules with Ivy
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.
Shell Library patterns with Nx and Monorepo Architectures
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.
Initial Null Problem of AsyncPipe and async data-binding
This article describes the Initial Null Problem of AsyncPipe and its root cause, and discusses new asynchronous data-binding to solve that.
RxJS in Angular: Part I
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.
Supercharge event management in your Angular application
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.
Angular a11y: 11 tips on how to make your apps more accessible
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
How to avoid Angular injectable instances duplication
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.
A thorough exploration of Angular Forms
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
Exploring the HttpClientModule in Angular
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/
Angular and Internet Explorer
Supporting Internet Explorer as a browser for your Angular 8.x or Angular 9.x application.
Help Angular to make your application faster
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
A detailed look at Angular's 'root' and 'any' provider scopes
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.
Getting inside Angular's ElementSchemaRegistry mechanism
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.
A look at major features in the Angular Ivy version 9 release
AOT everywhere, dynamic globalisation, strict mode, Bazel, and much more.
Angular + Web Components: a complete guide
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.
Next-level testing in Angular Ivy version 9
AOT, faster tests, stronger types, and component harnesses.
The Angular Ivy guide for library authors
How to respond to Angular Ivy in 2020/2021 if you're a library author.
NgRx creator functions 101
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.
Managing different slices of the same NgRx state
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.
Scully, the First Static Site Generator for Angular
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?
Top 15 Angular inDepth articles of 2019
We have collected the top 15 Angular inDepth articles of 2019.
Component features with Angular Ivy
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.
Writing custom virtual scroll strategy in Angular apps
Learn how you can handle dynamic items size for Angular CDK virtual scroll by providing your own VirtualScrollStrategy.
Here is what you need to know about dynamic components in Angular
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.
Exploring Angular DOM manipulation techniques using ViewContainerRef
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.
Creating a Sketchpad with Angular and P5JS
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.
Exciting Times Ahead — Be Ready For Angular 9
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.
Angular Tools You Should be Aware Of
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.
Overriding Angular Schematics
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.
Game Development: Tetris in Angular
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
What’s new After Angular 8
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.
Angular: show loading indicator when obs$ | async is not yet resolved
> AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. This article [https://indepth.dev/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular/] , its updates and more recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/] As a good developer, you always notify the end-user about the current status of an application by showing either loading indicator or error message. Async Pipe Using async pipe is quite common scenario in
Implementing multi-language Angular applications rendered on a server (SSR)
This article will teach you what you need to know to successfully implement multi-language Angular applications rendered server-side.
How in-depth knowledge of change detection in Angular helped me improve application's performance
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.
Asynchronous modules and components in Angular Ivy
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
Angular CLI Builders
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 .
Optimizing Events handling in Angular
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.
Building an API with Firebase
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.
How to talk with Web Components in React and Angular
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
Angular Platforms in depth. Part 3. Rendering Angular applications in Terminal
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
Angular Platforms in depth. Part 2. Application bootstrap process
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
Type-checking templates in Angular ViewEngine and Ivy
Beware what enabling full template type-checking in Ivy will bring us. Original 📷 by Jesse Bowser [https://unsplash.com/@jessebowser?utm_source=medium&utm_medium=referral]> AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. This article [https://indepth.dev/insiders-guide-into-interceptors-and-httpclient-mechanics-in-angular/] , its updates and more recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/] In this article, I will dive in
Type-checking templates in Angular View Engine and Ivy
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.
Angular Platforms in depth. Part 1. What are Angular Platforms?
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: *
Optimize Angular bundle size in 4 steps
Have a long initial page loading time? check this out. Have your web app ever been complained about taking too long to load? Have you ever been given a task to “optimize performance” of the slow app? There are tons of topics about improving your app’s performance, such as lazy loading, change detection, server side rendering, etc. One of the topic I want to talk about here, is optimizing Angular bundle size. It’s extremely easy and useful. Step 1: Know your Bundle Size It’s hard to deny that i
Emulating tree-shakable components using single component Angular modules
Refactoring the zippy application using SCAMs.
Designing scalable Angular applications
What is the best scalable architecture for Angular applications? This is a difficult question. If you search for “scalable Angular applications”, you will find a lot of articles that have a lot in common. I will try to summarize the most important points, list weak points and afterwards suggest my architecture variant. The main design recommendation is to introduce an additional layer between component and service classes. It is normally called “Abstraction” or “Facade” layer. Article writers s
RxJS recipes: ‘forkJoin’ with the progress of completion for bulk network requests in Angular
Adding customization to existing RxJS functions.
How Cypress Makes Testing Fun
Having fun with Angular and Typescript Transformers
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.
How to get started with Canvas animations in Angular
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
Brace yourself. Angular 8 is coming
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
Code-splitting in Angular or how to share components between lazy modules
This article will give you a better understanding of how Angular split your code into chunks. If you are scared from Angular CLI output showed above or if you’re curious how that code-splitting actually happens then this post is for you. Code splitting allows you to split your code into various bundles which can then be loaded on demand. If used correctly, can have a major impact on load time. Contents 1. Why should I care? 2. Angular CLI code-splitting under the hood 3. Simple Angular App
Angular Ivy change detection execution: are you prepared?
Update: Try Ivy jit mode https://alexzuza.github.io/ivy-jit-preview/ 👈 -------------------------------------------------------------------------------- Let’s see what Angular cooks for us Fan of Angular-In-Depth? Support us on Twitter! [https://blog.angularindepth.com/fan-of-angular-in-depth-and-my-writings-support-us-on-twitter-e3bfcbabb4b1] > Disclaimer: it is just my learning journey to new Angular renderer The Evolution of Angular View EngineWhile new Ivy renderer is not feature compl
Doing A11y easily with Angular CDK. Keyboard-Navigable Lists
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
Why Firebase Cloud Functions are Awesome
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.
Why Building with a JAMstack is Awesome
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.
How to get started with Cypress
Leverage Cypress for End-to-End testing In this article, I show how to use Cypress to run end-to-end testing with your front-end. I write multiple tests that simulate user behavior like registering and logging in a user. I explain how Cypress handles network requests and what features Cypress has to help us debug failing tests. And most importantly, I show that end-to-end testing can be fun. > Disclaimer: I clone an Angular project to run the tests, but the article does not contain any code spe
Testing and faking Angular dependencies
Learn the ins an outs of Angular dependency injection in automated tests.
Release management in Angular with Lerna
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
Why Angular inDepth is one-of-a-kind and how I joined the cause
The first Angular In Depth conference is coming up.
How to Build a Component Library with Angular and Storybook
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
Fastest way to cache for lazy developers — Angular with RxJS
HTTP caching simply means the browser stores local copies of web resources for faster retrieval the next time the resource is required, thus reducing the number of server calls. The aim of this article is to show how you can implement caching with only two RxJS operators: publishReplay() and refCount(). When you search for RxJS caching, you’ll most likely find articles, forums, and discussions that recommend either shareReplay() or publishReplay() with refCount(). In short, shareReplay() is s
npm Peer Dependencies
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
Making an Angular project mono repo with NgRx state management and lazy-loading.
By using Angular CLI, NgRx feature modules and a bit of manual work:-)
How to Start Flying with Angular and NgRx
NgRx is an open source library that provides reactive state management for your Angular applications. Inspired by Redux, NgRx provides a way to maintain...
NgRx: How and where to handle loading and error states of AJAX calls?
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
Angular Unit Testing @ViewChild
This articles explains how to writ unit tests for components with @ViewChild decorators using a stub component
Top 10 ways to use Interceptors in Angular
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
Building an extensible Dynamic Pluggable Enterprise Application with Angular
Inthis article, we will talk about how we can leverage Angular CLI build tools to create an AOT precompiled Angular plugin, which can share common code with other plugins and even work with Angular universal. This is an unofficial solution, but it works well for our case. > AngularInDepth [https://medium.com/angular-in-depth] is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev [https://indepth.dev/angular/]. Thanks for being part of indepth movement! Here
I changed my implementation of an EXTREMELY deeply nested Angular Reactive Form and you won’t believe what happened
Do you have a deeply nested data structure? Do you have to build a form around it? Is this form really slow to work with? Are your users complaining about it? Do you need an escape? WAIT! I’m here to guide you home. TL;DR: 1. Analyze a reactive form to identify the scopes for refactoring. 2. Modularize the code by refactoring for better separation of concerns. 3. Refactor the way the Reactive Form is generated in TypeScript. 4. Identifying the source of performance lag. 5. Enhance the perf
Tooltip with Angular CDK
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
Angular Revisited: Tree-shakable components and optional NgModules
NgModule is arguably one of the most confusing Angular concepts.
How the AngularFire Library makes Firebase feel like Magic
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.
Expecting the Unexpected — Best practices for Error handling in Angular
> “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/
Angular DI: Getting to know the Ivy NodeInjector
In this article, we’re going to examine a new Angular NodeInjector which heavily uses a bloom filter to retrieve a token. We’ll take a look at: * How the NodeInjector looks like * How Angular builds bloom filter for NodeInjector and when we can catch false positive values * What’s the resolution algorithm for resolving dependencies in NodeInjector Introduction The NodeInjector is one of the two new types(another one is R3Injector [https://github.com/angular/angular/blob/d83307adab10ab447
Tree-shakable dependencies in Angular projects
Tree-shakable dependencies are easier to reason about and compile to smaller bundles.
Do you know how Angular transforms your code?
A quick overview of Angular 7 typescript transformers Typescript added support for custom transformers in 2.3 version. This type of extensibility allowed developers to go beyond the scope of the base compiler. After that, almost everyone, who had a project with typescript compilation, wanted to turn his ideas into reality. Angular also could not stand aside. The first pull request on switching to transformer based compilation was born on 10 Jun 2017 [https://github.com/angular/angular/pull/173
RxJS: applying asyncScheduler as an argument vs with observeOn operator
This article explains the difference between applying an asyncScheduler as an argument and passing it to the observeOn operator
Angular CLI: camelCase or kebab-case
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
Reading the RxJS 6 Sources: Map and Pipe
> 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
Angular: Nested Reactive Forms Using ControlValueAccessors(CVAs)
In this post, we will see how to implement nested reactive forms using composite control value accessors(CVAs). Kara Erickson [https://twitter.com/karaforthewin?lang=en] of the Angular Core Team presented this approach at the Angular Connect 2017 [https://youtu.be/CD_t3m2WMM8]. Three Ways to implement nested forms: We will see the most commonly used techniques to implement nested forms. 1. Sub -Form Component Approach (providing ControlContainer) It is built differently for template and reac
RxJS in Angular: When To Subscribe? (Rarely)
Ben Lesh has a terrific article called “Don’t Unsubscribe” [https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87], telling you why you are better off not explicitly unsubscribing, but instead relying on constructs that cause the unsubscriptions to happen. In that spirit, I wanted to title this article “Don’t Even Subscribe”, but the truth is, there are a few places where you have to subscribe, so I settled for the less-emphatic title you see. When should you subscribe? The answer to t
The Angular DevOps Series: Deploying to Firebase with CircleCI
If you’ve done anything in web development in the past year, you’ve undoubtedly heard of CircleCI and Firebase.
Angular Workspace: No Application for You!
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
Improved Navigation in Angular 7 with switchMap
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
New in Angular 7.1: Router Updates
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
A gentle introduction into change detection in Angular
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.
Testing Angular container components
Learn tactics for testing RxJS observables and application state commands. Opt out of Angular testing modules for blazingly fast unit tests.
How to reuse common layouts in Angular using Router
Most of the web apps I worked on so far, had a design where different pages are using common layout. For example layout which consists of header, footer and sidebar, which are fixed for each page, and the content which varies by the page. Logical idea is to try to extract and reuse common parts. Based on the Angular docs, Pluralsight courses and other materials I found, I came up with two possible options. To better explain those options, let’s first define example project. Example Project Let’
Dynamic Import of Locales in Angular
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 with Angular
Container components are extracted from mixed Angular components to increase the maintainability, testability and scalability of our Angular apps.
The history of Model-View-Presenter
Dust off the history books and discover the origins of the MVP pattern.
The difference between NgDoCheck and AsyncPipe in OnPush components
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.
Angular Router Series: Pillar 3 — Lazy Loading, AOT, and Preloading
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
How to Read the RxJS 6 Sources Part 1: Understanding of() and Subscriptions
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
Angular Router Series: Pillar 2 — Understanding The Router’s Navigation Cycle
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
What every front-end developer should know about change detection in Angular and React
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.
Exploring Drag and Drop with the new Angular Material CDK
I’ve heard that Angular Material had a new drag and drop CDK in their upcoming version. Now with the first Angular and Angular Material release candidate being released, I think it’s time to explore some of the new stuff. I’m really looking forward to this and I’m assuming you’re too, so let’s not waste any time and let’s get started. We’ll start of with a simple example and build our way up to a simple task board. A simple example Let’s start by exploring the API with the simplest example I ca
Angular Flex-Layout: Flexbox and Grid Layout for Angular Component
CSS Flexbox and CSS Grid are very powerful layout functions. These are already supported by all modern browsers except for IE 11. Unlike properties for styling (for examplecolor and border), these are properties for building a layout structure. In other words, it is not used to beautify the surface of HTML elements but is used to create a foundation of application UI in cooperation with the hierarchical structure of HTML elements. In Angular, it is common for a view of a component to be divided
The Three Pillars of the Angular Router — Router States and URL Matching
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
Angular Router Series: Secondary Outlets Primer
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
A comparison between Angular and React and their core languages
Most popular tecjnologies in 2020- most controversial topics. This article won't provide you with the best solution. it will highlight, clarify nisconceptions.
The Three Pillars of Angular Routing. Angular Router Series Introduction.
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
The Angular Library Series — Publishing
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
Angular Testing with Headless Chrome
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
Becoming an Angular Environmentalist
In this article I"ll show you how to leverage Angular application environments to pass configuration settings to your application.
Start using ngrx/effects for this
You're probably only using ngrx/effects to handle the communication to an external source by triggering an effect with a NgRx action.
The Angular Library Series - Building and Packaging
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.
A curious case of the @Host decorator and Element Injectors in Angular
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.
Creating a Library in Angular 6 using Angular CLI and ng-packagr
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.
Ivy engine in Angular: first in-depth look at compilation, runtime and change detection
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.
Working with DOM in Angular: unexpected consequences and optimization techniques
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.
Gestures in an Angular Application
In this post I will attempt to explain how to use hammerjs [https://hammerjs.github.io/] gesture recognizers provided by the @angular/platform-browser [https://github.com/angular/angular/tree/5.2.9/packages/platform-browser] package. I’ll be referencing @firstname.lastname@example.org within my code samples, but there are some changes coming to 6.0.0 that will be discussed later. Background If you are working on a mobile project that requires gestures, hammerjs [https://hammerjs.github.io/] h
Deploy an Angular Application to IIS
Getting your Angular Router application actually working in a non-root folder on Internet Information Services The Angular Router [https://angular.io/guide/router] is a fantastic module for Single Page Apps. However, to deploy it in a Production scenario you will typically need to do some configuration to make it work. This article details the steps necessary to deploy an Angular Router application anywhere on Internet Information Services (IIS). Here is a quick overview of what is covered in
What you always wanted to know about Angular Dependency Injection tree
If you didn’t dive deep into angular dependency injection mechanism, your mental model should be that in angular application we have some root injector with all merged providers, every component has its own injector and lazy loaded module introduces new injector. But maybe there is some more you should be aware of? Also a while ago, so-called Tree-Shakeable Tokens [https://github.com/angular/angular/pull/22005] feature was merged into master branch. If you are like me, you probably want to kno
Catch Angular template errors like a pro or how I create Angular Demo
I consider myself an active StackOverflow [https://stackoverflow.com/] user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers. To create angular demo I usually use either plunker [https://plnkr.co/] or stackblitz [https://stackblitz.com/] or even jsfiddle [https://jsfiddle.net/]. I like all of them but when I run into some errors I want to have a litt
Insider’s guide into interceptors and HttpClient mechanics in Angular
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.
He who thinks change detection is depth-first and he who thinks it’s breadth-first are both usually right
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.
Do you really know what unidirectional data flow means in Angular
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.
Do you still think that NgZone (zone.js) is required for change detection in Angular?
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.
These 5 articles will make you an Angular Change Detection expert
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.
The essential difference between Constructor and ngOnInit in Angular
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.
I reverse-engineered Zones (zone.js) and here is what I’ve found
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.
Never again be confused when implementing ControlValueAccessor in Angular forms
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.
The essential difference between pure and impure pipes in Angular and why that matters
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.
The new Angular HttpClient API
Series This post is part of the HttpClient API series: 1. The new Angular HttpClient API 2. Testing with the Angular [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] HttpClientTesting [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] API [https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712] The HttpClient API was introduced in the version 4.3.0. It is an evolution of the exist
If you think `ngDoCheck` means your component is being checked — read this article
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.
Avoiding common confusions with modules in Angular
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.
What is `forwardRef` in Angular and why we need it
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 to manually bootstrap an Angular application
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
A Deep, Deep, Deep, Deep, Deep Dive into the Angular Compiler
As you know, I love Angular, and all the magical things you can do with it [https://medium.com/@urish/ngvikings-beacons-and-fun-with-web-bluetooth-5f2b1bdfff19] , and I thought it would be an interesting challenge to take a peek into the compiler in Angular 4, try to reverse engineer it, and simulate some part of the compilation process. Working through the compiler was a great experience, and I turned a lot of what I learned into my talk at ng-conf 2017: DiY Angular Compiler [https://www.youtu
Everything you need to know about the `ExpressionChangedAfterItHasBeenCheckedError` error
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.
The mechanics of property bindings update in Angular
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.
Here is why you will not find components inside Angular
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.
The mechanics of DOM updates in Angular
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.
Here is how to get ViewContainerRef before @ViewChild query is evaluated
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.
Implementing custom component decorator in Angular
Everything you need to know about debugging Angular applications
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.
Hooking into the Angular bootstrap process
From this article you'll learn how to use APP_INITIALIZER token and bootstrapModule to hook up into Angular's initialization process.
Angular’s $digest is reborn in the newer version of Angular
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.