Top Angular blog posts from June 2020
Version 10 of the Angular framework was released at the end of June, and this means our recap of June’s top Angular blog posts is bound to feature some good ones. Give it a read and make sure you didn’t miss any of them!
Version 10 of Angular Now Available
Let’s start with the already mentioned release of Angular 10, with the post, as always, written by Stephen Fluin. This version was released only 4 months after Angular 9, and another major release is planned for the end of the year.
Among the new features of version 10 are the new date range picker, updates to several dependencies (e.g. TypeScript 3.9), and new default browser configurations with older and unused browsers excluded. Support for these older browsers has also been deprecated.
In addition, the Angular team has significantly involved and been helped by the entire community for this release. As Stephen states, they had worked on over 2000 issues in the previous three weeks, and they plan on continuing the trend of working with the community.
Implementing Grouping Checkbox Behavior with Angular Reactive Forms
Next up, we have a post by the extremely prolific Netanel Basal describing how to implement grouping checkbox behavior. The first thing to do is to create a FormGroup with one FormArray, then create a FormControl for each item and add it to the array. Then we create the form through which we can loop, and we can check or uncheck each of its items.
For the group checkbox functionality, two directives need to be created, one for querying and interacting with the group checkbox element, and the other for interacting with the controls and updating the value. Finally, all that’s left is inserting the two directives into our form.
Here's what you should know when creating flexible and reusable components in Angular
For the third post this time, we have a post by Kevin Kreuzer on inDepth.dev about creating flexible and reusable Angular components using ng-content and ng-template. He provides a short description of both, then shows more of their properties by creating a flexible expander component, for which he initially uses ng-content.
To illustrate things better, he projects a clock component to the expander, but this now poses some problems: because of the way ng-content calls lifecycle hooks, the component does not function as we would want. A viable solution is to use ng-template instead of ng-content; the latter approach has a cleaner API and is for simpler use cases, whereas the former is suited towards dynamic content.
Using MSW (Mock Service Worker) in an Angular project
In this post, Tim Deschryver shows how to use MockServiceWorker, an API mocking library popular among React developers, in an Angular application. The post details step by step how to create a proof of concept to search for a GitHub user’s username.
First, you need to install MSW via the CLI, and add the generated file to the assets in the angular.json file. Then, you need to create a mocked server, and finally import the mock.
For testing, you need to add MSW to the Karma & Jasmine test builder, and import the mocks. No changes are required for Cypress testing, while Jest tests seem not to work even with Tim’s workaround.
Building a Custom Stepper using Angular CDK
We continue with a post by Maina Wycliffe in which he takes you through the process of building a custom stepper component with Angular CDK, which functions the same as an Angular Material component but is more customizable.
The first thing to do is install and set up Angular CDK before actually building the stepper. A large section of Maina’s post is then dedicated to using the component: first some general information on its usage, e.g. what props can be passed to it, then a common use case of using the stepper with forms, covering both working with a single form and multiple forms.
Angular Autosave for Forms, Services and NgRx
Moving on, this blog post by Nils Mehlhorn presents different ways of implementing autosave behavior in Angular. He starts off by pointing out the differences between autosave and caching, then continues with three different autosave approaches - namely, form autosave, autosave for subject services, and NgRx autosave.
The final part of Nils’s post is then dedicated to some considerations on which protocol to use for making requests. As his examples have relatively low request frequencies and small payload sizes, he recommends going with HTTP. If you don’t have to send any data to the server, however, you can just store it in localStorage or IndexedDB.
Improved Error Logging by the Angular AOT Compiler
This next post by Santosh Yadav shows how much error logging in Angular has improved since version 8 of the framework, largely thanks to the Ivy compiler introduced in Angular 9.
In version 8, the errors that you get tend to be confusing and not very helpful. This is improved in version 9 with Ivy and Ahead-of-time compilation, where the error messages are more accurate, even stating the line in which the error appears.
Angular 10 then takes things even further, with version 10.1 promising to provide even more relevant background information as to why an error has occurred.
In defense of the Angular framework
The last post we wanted to feature this time relates the experience of a developer who had mostly been working with React and is now working on an Angular project for the first time. The author Žane Suhadolnik highlights the large number of files as one of the framework’s pain points, nevertheless he agrees with the importance of the separation of concerns.
As for the use of TypeScript and RxJS, two other defining characteristics of Angular, Žane is on board with both. Comparing it to React, he points out that the former is more opinionated and thus more suited for enterprise use cases, whereas the latter offers more flexibility and is more frequently used in smaller, less complex projects.
This concludes our recap of top Angular blog posts for this month. Stay tuned for more posts and then a new recap early next month!
