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.

Read more about strict mode in Angular 12

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.

Read more about form validation in Angular

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.

The post starts off with an explanation of reactive programming and the difference between Promises (callbacks) and Observables (streams) in JavaScript. Paul also explains Operators which are used to perform actions such as creation and termination on observables. In the last section, he takes a look at the async pipe for subscribing to observables.

Read more about reactive programming with RxJS

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.

Read more about building an Angular app with Nx and NgRx

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.

As he points out, the most common approach with CSS media queries has several disadvantages, such as increased CPU usage. Instead, he proposes using JavaScript’s 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.

Read more about improving responsiveness in Angular

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.

Read more about headless Angular components

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.

Read more about theming an Angular app with Tailwind

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.

Read more about AngularJS’s EOL and your options

These were some of our favorite Angular reads from February. Tune in next month for more top Angular content!