&w=3840&q=80)
We’re past the middle of April now and we’re still waiting for our lives to return to normal (whatever that will look like when the dust settles). Luckily, working from home doesn’t prevent us from reading and producing interesting development-related content - read on for a recap of the top Angular blog posts from March.
Version 9.1 of Angular Now Available — TypeScript 3.8, faster builds, and more
Similarly to last month’s list, we’re starting this one with Stephen Fluin’s announcement of Angular’s latest version, this time 9.1. As a minor version, it logically doesn’t provide as groundbreaking features, but a few of the most notable ones include faster builds thanks to improved ngcc, and support for TypeScript 3.8, which itself has several cool features.
In addition, Angular 9.1 also includes the option to generate displayBlock through the CLI, support for grep and invertGrep in end-to-end tests, improved HTML and expression syntax highlighting, a directionality query API, TSLint 6.1 for new projects, and several other minor features and improvements.
How to create a fully tree shakable icon library in Angular
The next post we’d like to mention, written by Kevin Kreuzer, is a continuation of his earlier post on creating an icon library in Angular. This one takes it a step further and details how to create an icon library that’s fully tree shakable.
Tree shaking essentially means the bundle only includes the icons actually used in the application out of all the ones in the library. If an icon library is fully tree shakable, each icon used is loaded in a separate chunk, which additionally improves performance.
This is enabled with the help of the svg-to-ts generator which has a lot of configuration options and therefore offers a lot of flexibility.
Implement Multiple Selection Using Shift + Click in Angular
In this post, Netanel Basal shares his approach for implementing multiple selection using shift and click in Angular. He provides step-by-step instructions, starting with creating a base SelectionItem interface and a component implementing this interface, then a MultiSelection class which manages the state of active items.
With the merge observable, we handle the clicking on items, covering both if the user is or isn’t holding the Shift button. We also add an API to return active items as both getter and observable. The final part of Netanel’s post then focuses on extending this core functionality with multiple checkbox support and using it with Angular Reactive Forms.
Angular Bad Practices: Revisited
We continue with a post by Armen Vardanyan which takes a look at some things you should avoid doing when creating Angular applications if you want them to perform well.
The first thing Armen points out is overloading the ngOnInit lifecycle hook; you should instead split it up, which makes it easier to discover bugs and make changes.
The other bad practices discussed by Armen are writing poor directive selectors (this bloats the HTML), placing logic inside a service constructor, and storing derived state in separate properties and variables rather than calculating it from the known state when needed.
How to create a memory leak in Angular
Next up, we have another post by Kevin Kreuzer, this one an excellent illustration of the different causes of memory leaks in Angular, and how to deal with and prevent them.
Kevin begins by explaining how memory management and garbage collection work in JavaScript, then moves on to more Angular-specific examples. He poses several scenarios which show that a memory leak only occurs when subscribing to a service.
In order to avoid memory leaks, you must remember to unsubscribe from observables; Kevin proposes using destroy$ together with takeUntil. He recommends a useful tool to prevent you from forgetting - awesome lint-rule, written by Esteban Gehring, whom Kevin also credits for the work described in the post.
Angular: Keeping it Fat, Dumb, and Happy
The sixth post on our list for March deals with Todd Palmer’s architectural approach to Angular applications to make them better readable, testable and maintainable. It is based on these principles: Templates should be declarative and dumb, Components thin and smart, and the Services fat and happy.
So, for Templates, declarative means not containing complex logic, while dumb means that the Template only knows about its Component and sub-component Templates. A smart Component knows and manages the current state of the Template, and a thin Component contains only the necessary code. As for Services, fat refers to them containing business logic, while happy means that they only focus on a single responsibility.
Dig Deeper into Static Site Generation with Scully and Use the Most out of It
Almost at the end of this month’s recap, we have a post by Danny Koppenhagen exploring Angular’s recently released static site generator Scully. It’s basically a kind of sequel to Danny’s earlier post on Scully, this one detailing how to set up a custom Markdown module, use AsciiDoc instead of Markdown if you prefer, and using a custom route plugin to handle protected routes.
First, we need to generate a post with a metadata template, then generate a custom Markdown module. If we want to use AsciiDoc, we need to make use of the Scully AsciiDoc plugin, then change the generated file’s extension and modify it a bit. In the case of protected routes, we can create a custom plugin that will skip those routes.
Angular 9's Best Hidden Feature: Strict Template Checking
The last post we wanted to include this time is John Papa’s post on Auth0 about a very powerful but lesser known feature of Angular 9 - strict template checking. Along with the Ivy compiler, it makes it much easier to find and report errors in version 9 than in 8, which John shows with a comparison of what compiling looks like in the two different versions.
First off, Angular 9 enables AOT compilation in the development build, so certain errors are now spotted just with ng build. By enabling strict template checking, you can find even more errors that could not have been detected in Angular 8, such as missing bindings inside the template of a component.
These were some of our favorite Angular posts from last month. If you enjoyed this recap, check out some of our other Angular-related blog posts.
