Top Angular blog posts from February 2021
February featured a lot of great Angular articles, so it wasn’t easy to make our picks for this month. We hope you enjoy the list!
With Best Practices from the Start
We’re starting off this month’s recap with a post by Minko Gechev announcing that the Angular CLI’s strict mode will be enabled by default for all projects starting with Angular 12. This decision is based on the feedback from the community that nearly 70% of developers using Angular have opted into strict mode.
Since strict mode employs stricter type checking, enabling it will allow you to catch more errors earlier on in the development process. Thanks to Ivy, you’ll also benefit from stricter type checking in the templates. Your applications will adhere more strongly to best practices, and on top of that you’ll have a better developer experience.
A new way to validate Angular Forms
Next up, this post by Tim Deschryver introduces his proof of concept for a different approach to handling form validation in Angular. His solution still leverages the Forms API and functions as an extra layer on top of it, but it also takes care of cases such as conditional validation, for which there hasn’t yet existed a best-practice solution.
One of the key things for Tim was to not write custom code for everything, but come up with a few baseline validation rules that can be easily tested and reused. He builds the validators with the
createValidator<T>() wrapper which uses when to enable conditional validation.
Clean code through Reactive programming in Angular with RxJS
The next blog post on this month’s list comes from Paul Clavier of Sipios, and in it he breaks down and describes reactive programming in Angular with RxJS. As he points out, in order to really embrace reactive programming, it’s not enough to simply use Observables in the same way as Promises; you need to think reactively.
async pipe for subscribing to observables.
Building an Angular application from scratch with Nx and NgRx
For the fourth post, we have Brandon Roberts showing how to build an Angular app using Nx and NgRx. The app that he’s building is a generator of quotes from the TV series Seinfeld.
He begins with a brief explanation of Nx and NgRx, then the setup for both, the Nx workspace and the NgRx Store, Effects and DevTools, including generating all the necessary libraries.
He also creates a service for fetching quotes and a component for the quotes feature page. What’s left then is to scaffold the NgRx feature state and then connect it to the feature page to be able to fetch and display the quotes.
Improved Responsiveness for Improved Performance in Angular Apps
We continue with a post written by a regular of these monthly recaps, Netanel Basal. In this post, he takes a look at improving responsiveness and hence the performance of an Angular app by toggling the visibility of certain page elements.
matchMedia API which is much more streamlined and specific.
If you want, you can also use
breakpointObserver from the Angular CDK to wrap the
matchMedia API. For those cases where you have an entire module that should sometimes not be loaded, consider using lazy loading in combination with this approach.
Headless Angular Components
Another post from February that we enjoyed comes from Hayden Braxton and deals with headless components in Angular. Headless components only provide the behavior to their child components and thus allow for much more customization of the UI’s visual aspects as well as greater reusability across different apps or teams.
Hayden works on the example of a file select component and first attempts at solving this with multiple instances of
@Input(), which isn’t optimal as it ships redundant code, similarly to overriding default CSS. To make components truly headless, you need to make use of the structural directive
*callbackTemplate which allows the child content to render the file select dialog anywhere in the UI.
Using Tailwind to Theme Your Angular App
Tailwind CSS is a recent framework we’ve been interested in, and so we just had to include this post by Preston Lamb which shows how to use it to provide a theme for your Angular application.
As Preston states, one of Tailwind’s selling points is its ability of extending its color palette and other utility classes. This is done using the
extend attribute which allows you to specify primary, secondary and accent colors.
Loading the theme upon the application’s bootstrapping is done with the
APP_INITIALIZER token. Finally, you need to import the
TailwindThemeModule created in the first step into the main
AppModule and then you can run the application.
Finding a Path Forward with AngularJS
In the final post we’d like to highlight this month, Mark Techson addresses the end-of-life of AngularJS which is planned for the end of the year, and looks at what the options are for AngularJS site owners. The most straightforward option is of course migrating to Angular, where innovation is still taking place. You can also use the ngUpgrade library for incremental migration.
Additionally, you can continue using the latest version of AngularJS and continue receiving critical updates until December 31st. After that date, there will be the possibility to get extended long term support that will take care of issues such as security patches and browser breaking changes.
These were some of our favorite Angular reads from February. Tune in next month for more top Angular content!