Top Angular blog posts from March 2021
Like every month, we’ve prepared a recap of some of the top Angular posts from the month before. We hope you enjoy revisiting them!
Nx is Modern Angular
First up, we have a post by Victor Savkin explaining how Nx is essentially a more streamlined and modern version of Angular, one which can actually work even for a multi-framework setting.
One of the key elements of this is the replacement of outdated tools with more modern ones: Karma with Jest, Protractor with Cypress and TSLint with ESLint, while using Storybook as the UI component library.
The other key component is Nx’s CLI, which can be used on its own or simply to enhance the developer experience of using the Angular CLI. It’s partly based on Angular’s CLI as well, with important optimizations in performance and things like the already powerful ng update.
Read more about Nx as modern Angular
A practical guide to Angular Template-Driven Forms
We continue this month’s recap with Tim Deschryver’s practical guide to template-driven forms in Angular. It starts off with a section on creating an Angular form which includes a breakdown of different form building blocks.
The next two sections are dedicated to form validators and testing form validators. After that follows a section about form errors, which covers control states, validation messages and form helpers.
Next up, Tim takes a look at creating dynamic/nested forms with the template-driven approach, followed by sub-form components and a couple different ways of creating them. He provides thorough examples for every part of the blog post, which can also be found on GitHub.
Read the practical guide to Angular template-driven forms
🎉 New in Angular v12 — Passing Context to HTTP Interceptors
In the third post we’d like to highlight, Netanel Basal breaks down a long-awaited Angular feature that’s released in version 12 - passing metadata to HTTP interceptors.
Netanel’s post works with the common use case of notifying the interceptor that a request is cacheable. You need to make sure that you’ve upgraded to the latest version, then use to CLI to generate the interceptor.
The next step is to create a unique token with HttpContextToken and provide a default value for it. Then we can provide it in the HTTP request.
Read more about passing context to HTTP interceptors
The Complete Guide To Angular Security
Next up, we have a post by Christian Lüdemann which talks in-depth about security in Angular. It starts off with listing the OWASP top ten (Open Web Application Security Project’s list of top online security risks) and outlining the ones which are most relevant for Angular applications: Cross-Site Request Forgery (CSRF), Sensitive Data Exposure, Cross-Site Scripting and Using Components with Known Vulnerabilities.
Christian also provides an overview of some of the most common security concepts, before taking a closer look at each of the four areas listed above, providing more examples for them and showing the best practices of addressing them in Angular.
Read more about security in Angular
View State Selector - Angular design pattern
Another interesting post is this next one by Natan Braslavski in which he shows his design pattern for View State Selector that reduces both boilerplate code and the potential of bugs or missing templates, which gives it an advantage over the quite similar ngSwitchCase.
The post focuses on the common use case of changing the view depending on the asynchronous HTTP state. The view$ observable has three possible states: loading, main and error, each of which is bound to a template that gets rendered according to the observable’s value. In the second part, Natan shows how to implement this pattern as a reusable pattern.
Read more about View State Selector in Angular
NGRX Best Practices
The sixth post comes from Armen Vardanyan, who talks about the best practices of building an Angular app with NgRx. Right away, he gives the number one piece of advice: since NgRx changes the way an Angular app is written and structured, you really need to have a neat folder structure, with Feature Stores and a consistent structure and naming.
He continues with other important tips: using named selectors, writing helper functions and custom operators, leveraging @ngrx/entity and @ngrx/component-store, and using a linter with rules for NgRx, such as eslint-plugin-ngrx which was actually contributed by Tim Deschryver whom we’ve shouted out already on this recap.
Read more about NgRx best practices
Ivy’s internal data structures
Nearing the end of March’s recap, we have a post by Miško Hevery breaking down the internal data structures of the new Ivy rendering engine. Ivy handles rendering by keeping track of three kinds of data: Template, Logical Tree and Render Tree.
The template information is stored in TView, TData and TNode data structures which provide the template’s static information. LView or Logical-view represents specific instances of TView, and the render tree is the actual DOM tree, which differs from the logical view as it also considers content projection. On loading the application, Ivy creates the TView, which is then used to create LView instances upon bootstrapping or instantiating the application.
Read more about Ivy’s internal data structures
Extend Angular Schematics to customize your development process
The final post from March that we’d like to mention comes from Maciej Wojcik; it shows some neat tricks for extending your Angular schematics in order to streamline your development process.
Maciej first provides a brief overview of schematics and why they are useful before proceeding to the main section of his blog post, namely, showing how to override the default schematics and customize them to suit specific project needs.
This includes creating a library for schematics, implementing the custom component schematic and writing the template. In the final part of the post, Maciej suggests some possible improvements to this approach, e.g. updating Schema.json with additional parameter definitions.
Read more about extending Angular schematics
It wasn’t easy making our selections for this post, as the Angular community has been producing a lot of top-notch content lately. Still, we hope you enjoyed March’s recap; tune in next month for a similar recap of our favorite reads from April!
