Top Angular blog posts from September 2020
Take a look at our recap of last month’s top Angular articles to revisit some of our favorite posts or discover a new favorite author.
Angular Schematics from 0 to publishing your own library
We’re kicking off our recap of September’s top Angular post with a four-part series by Natalia Venditto on inDepth.dev. Part one serves as an introduction to schematics, covering its main benefits and the most important vocabulary, then part two takes a look at different methods of the Schematics API.
In part three, the content becomes more practical; here Natalia takes us through actually building schematics, from generating first a blank and then a custom schematic with the CLI to generating a schematic in an Angular app. The final part then shows how to extend the post schematic of Angular’s static site generator Scully to allow it to generate docs.
Read more about Angular Schematics
Angular Thoughts on Docs
Speaking of docs - next up we have David Shevitz’s breakdown of the recent and upcoming updates to the Angular documentation. The major one is that they’re now making the docs more oriented towards developers new to working with Angular.
The three big changes that are planned are revamping the table of contents, categorizing topics and streamlining the existing content.
Furthermore, the Angular team wants the content to be more focused, so now the goals of the docs will be to help users get things done. Of course, since the existing docs are still an invaluable resource, so these improvements will be done without tampering with them.
Read more about changes to Angular docs
The Best Way To Architect Your Angular Libraries
In the third post on this month’s list, Tomas Trajan shows in detail how to cleanly architect an Angular library. In the first section, he shows how to create a new library project with the help of Angular CLI Schematics.
The next few sections are dedicated to sub-entries of the library: generating them by using the ng-samurai collection of schematics, composing their logic, avoiding circular dependencies between them, and more.
Finally, Tomas also shows how to create a demo app in the same workspace to showcase some of the library’s functionalities. In addition, he includes two bonus sections: testing the newly created library with Jest, and some extra resources that go more in-depth into some of the steps used by Tomas in his article.
Read more about architecting Angular libraries
The benefits of adding rx-query to your Angular project
We continue with a blog post published by Tim Deschryver on inDepth.dev about the extra benefits of using rx-query to fetch data over HTTP in an Angular project. As Tim states, making a HTTP request using rx-query is very similar to the standard method provided by Angular, the only difference being having to provide a key for each query so that it can be cached.
This caching has notable performance benefits, making the application faster with for example prefetching data. Other benefits of rx-query include retrying queries a few times before returning errors and refreshing queries so that the state remains fresh. It even has the option of updating state manually.
3 Style Management Tips That Will Save You a Headache in Your Angular App CSS
If you’ve been reading this recap and waiting for a blog post by Netanel Basal, then you’re in luck! This month we’re including his post about 3 tips for managing the CSS in your Angular application.
The first tip is to create a core component library; this allows for faster development cycles, which is especially beneficial as the app scales. The next one is using utility classes; for this, Netanel utilizes the Tailwind CSS library, and he also includes some tips on working with it.
The third and final tip is to use CSS variables - they have good support, can be updated during runtime, and can be scoped to a single element.
Read more about managing CSS in Angular
The best way to implement custom validators
Another author whose posts we really enjoy reading is Kevin Kreuzer, who always does a great job of making his content at the same time very informative and fun to read. In this post, he shows the reader how to build a custom Angular validator by reverse-engineering the default ones provided by Angular.
He starts off with a short overview of Angular validators and the standard approach for implementing a custom one. Then he compares the built-in validator with the just created custom one, only to expose how the latter still underperforms. So, in the final part of his post, Kevin applies the lessons learned from this comparison to optimize the custom one.
Read more about implementing custom validators
Testing Angular route guards with the RouterTestingModule
Approaching the end of this month’s recap, we have another post on inDepth.dev, this one written by Lars Gyrup Brink Nielsen, about using RouterTestingModule to test the route guards of an Angular application.
Lars first gives an overview of the AuthGuard route guard of the extended Tour of Heroes application from Angular’s documentation, including detailed coverage of all its different operations in isolation, with all its dependencies stubbed.
The next section of the article is then dedicated to the integrated route guard test with RouterTestingModule. This method gives us additional benefits, namely, configuring routes, setting up a test application, navigating the configured routes with Router, and checking the URL after navigation is completed by using Location.
Read more about testing route guards
Speed up your Angular schematics development with useful helper functions
The final post from last month we wanted to mention is Danny Koppenhagen’s guide to using helper functions to streamline the development of Angular schematics. Right away, he also gives the disclaimer that these methods are not yet officially supported in the public API, so it’s wise to keep up to date with their future changes if you decide on using them.
Danny covers quite a lot of different use cases with different util functions. These include making updates to the package.json file, adding content on a specific position, determining the relative path to the project root, adding TypeScript imports, updating NgModule, retrieving the Angular workspace configuration and calling schematics from schematics.
Read more about helper functions for schematics
We hope you enjoyed this month’s recap. For more interesting Angular articles and interviews with community members, check out the Angular section of our blog.
