Top Angular blog posts from January 2020
Well, with January behind us, the new decade has now (unofficially) officially begun. If you’re still feeling that New year vibe, check out our recap of some of the top Angular blog posts from last month.
5 tips to make your Angular application more accessible
The first one to make it to our list for January is This Dot Labs’ Daniel Marin’s post containing 5 accessibility tips for Angular applications, part of his Make It Accessible series.
Except for the first one (using ngIf to hide elements from the DOM), these are all general accessibility tips that can be applied to other frameworks: using semantic HTML, using well-structured headings, having logical focus flows, and trusting CSS.
The aim of Daniel’s article isn’t guaranteeing that you’ll achieve perfect WCAG compliance, but more showing some best practices that can greatly help an app’s accessibility with little effort. If you have a useful a11y tip that he’s missed, let him know and he’ll update the post.
A Practical Guide To Angular: Handling HTTP Operations
Another blog post from January that we really enjoyed is Peter Mbanugo’s tutorial on handling HTTP operations in Angular - namely, how to make HTTP requests and how to work with RxJS observables.
The first step described is creating a JSON file containing the content to be served, then follows a section on working with Angular’s HttpClient service. Here, Peter also provides a brief explanation of what RxJS is. The second half of his post is then dedicated to subscribing to observables.
One of the top reasons we liked Peter’s post is that he tackles a relatively complex topic in a user-friendly way, which makes it suitable for both beginners and more seasoned developers.
Top Reasons Why Your Angular App Is Slow
A fast and well-performant application is what every user expects on the web today; but, with so many factors contributing to performance, this is often easier said than done. In the next post on this month’s list, Giancarlo Buomprisco takes a look at some of the top reasons your Angular app might be performing poorly, and what you can do to remedy it.
Contrary to popular belief, micro-optimizations to your average app may in fact be much less relevant than one would think; the more important things to pinpoint are whether the app a) renders things too often, or b) renders too many things. Only after checking this does it make sense to micro-optimize the bits of code that are simply less performant.
Angular Reactive Forms: The Ultimate Guide to FormArray
For the fourth post on this month’s list, we have Netanel Basal’s ultimate guide to working with FormArray in Angular Reactive Forms.
Netanel begins the post with an explanation of FormArray and the basics of how it’s used. He continues with a more practical example of using a FormGroup which contains a FormArray, as well as a FormArray containing a collection of FormGroups, for which he employs the FormGroupName directive.
He then explains how to apply FormArray validation before concluding with an example of FormArrays controls populated by data coming from a server; he creates a new FormArray from scratch, then sets the value for its controls.
The Best Way to build reactive sub-forms with Angular
We continue with another blog post touching upon Angular reactive forms, this one written by Tomas Trajan. The problem to tackle is how to avoid code repetition when there are a lot of forms in an application, and Tomas first presents a few solutions that are each somewhat lacking: duplication of the address sub-form TypeScript definition and HTML template and extraction of the sub-form template into a dedicated sub-form component to be reused later.
He then proposes some even smoother approaches to implementing dedicated sub-form components (e.g. including a simple helper interface) and concludes the post with a third option for building reactive sub-forms: custom ControlValueAccessor implementation, which is however not the ideal solution for this specific use case.
How you can help Angular in 2020
We’re moving on with a post that’s slightly less development-focused and more oriented towards the Angular community. In it, Lars Gyrup Brink Nielsen shares what he thinks will be the biggest challenges for Angular this year, as well as tips to members of the community on how they can help move things forward faster.
Because of the amount of effort put into Ivy, there are quite a few other areas that need to catch up. The challenges that Lars highlights are the following: RxJS, Bazel, TSLint, Protractor, Augury, and the transition from View Engine to Ivy which came with Angular 9. To learn more about how you can get involved, we recommend you check out his entire post.
Lazy load Angular components
Towards the end of this month’s list, we have a post on Angular in Depth by Kevin Kreuzer on lazy loading components with Angular 9 and the brand new Ivy renderer. It is in fact Ivy that enables the lazy loading of components, as previously, it was only possible to do it with modules.
This is thanks to a new concept introduced in Ivy: “locality”, making a component’s metadata local and thus enabling it to exist without a module. Kevin’s post guides the reader through implementing the lazy loading of a component on the example of a QuizCard component for a Quiz application.
Scully, the First Static Site Generator for Angular
Last but not least, we have another post published on Angular in Depth by Santosh Yadav, which takes a look at Scully, Angular’s first ever Static Site Generator developed by HeroDevs.
A SSG is based on the JAMstack (JavaScript, APIs and Markup) which was introduced in 2017 and has seen a rise in popularity, with Gatsby for React leading the SSG pack.
In his post, Santosh takes you through the steps of creating a blog post with Scully: creating the Angular app with Ivy, adding Scully support and blog post support, using Scully routes, and, finally, running the Scully build process to generate the static site.
Since plugins are a key part of SSG and Angular as a fledgling SSG is still lacking in plugins, Santosh also encourages readers to create and contribute their own.
These were some of the top Angular blog posts from January. Check back next month for a recap of February’s posts - with Angular 9 released just last week, we already know the next edition will feature some exciting posts!
