Top Angular blog posts from October 2020
We’re bringing you another set of interesting and useful Angular articles written last month. We hope you enjoy the read!
Compliant components: Declarative approach in Angular
For starters, we have an article on inDepth.dev by Alex Inkin on writing compliant Angular components by following the declarative approach in programming, playing on its interesting analogy with the flexibility of compliant mechanisms.
Alex takes the reader through the creation of several components, each increasingly complex, in order to demonstrate declarative programming. So, each component was written by describing its state rather than with imperative commands.
In the final part of the article, Alex also addresses the concern of so many recalculations negatively impacting performance. His solution to this is to add a decorator which remembers passed arguments and the last result and thus avoids unneeded recalculations.
Read more about compliant components in Angular
New possibilities with Angular’s push pipe - Part 2
The second post we’re including is part two of Michael Hladky’s series on the Angular push pipe, a new way for the framework to handle change detection locally rather than globally. While part one of the series serves as an introduction to the push pipe, in part two Michael actually dives into its implementation and some problems that can occur.
The main one is that this method entails multiple render calls for a single change. While it can be resolved by implementing the coalesceWith RxJS operator, this will still cause over-rendering in a lot of cases, so you need to also use a ‘WeakMap’ for state management. If done correctly, you should benefit from significant performance boosts.
Read more about the Angular push pipe
Autofocus That Works Anytime in Angular Apps
Moving on, we have a post by Netanel Basal on how to implement autofocus in Angular that works in all cases. The problem with the native autofocus attribute is that it only focuses elements once, on page load, and thus focus doesn’t work with conditionally rendered elements or when accessing elements without reloading a page.
To fix this, we need to create a directive that adds the autofocus functionality to each element. This allows us to target each one with the attribute and invoke the focus() method in the ngAfterViewInit hook. In closing, Netanel provides one extra tip for modifying the element based on its visibility by using the ViewChild query with a setter.
Read more about autofocus in Angular apps
Bring reactivity to your Angular templates with the LetDirective
Fourth on this month’s list, this two-part series by Kajetan Świątek addresses a similar problem as a previously mentioned post - namely, the shortcomings of the Angular async pipe. In his two posts, Kajetan introduces and shows how to implement the LetDirective class that is able to solve the issues pointed out.
Part one provides an overview of the issues with the async pipe and starts creating LetDirective. In part two, Kajetan continues with its implementation and covers the remaining requirements outlined in the first post. He finishes with some extras, such as the RxAngular library and adding suspense to the view.
How to Lazy Load a Component in Angular
Next up, we have an article on Telerik’s blog by Dhananjay Kumar on how to lazy load an Angular component. He presents two ways of achieving this: with an import statement inside an async-await function and with then().
The article starts off with creating the component that’s to be lazy loaded, then continues with how to lazy load it in the parent component and how to pass data to the lazy-loaded component.
While this is described for the async-await method, there are some cases where this is not possible, so Dhananjay also includes a section on using then() instead. He finishes with using a module within the lazy-loaded component and lazy loading components in ng-template.
Read more about lazy loading components in Angular
The Complete Guide to Angular User Authentication with Auth0
We continue our recap with Dan Arias’s comprehensive guide to adding user authentication to Angular by using the Auth0 Angular SDK. He starts off the article with an introduction to Auth0 and how it works, how to connect it with Angular and how to set up the SDK.
In the next part, Dan moves on to adding authentication via the SDK which involves creating the buttons for the events that will trigger authentication, namely, the login, logout and signup buttons.
Some final things Dan takes us through are retrieving user information, implementing route protection and making secure API calls from Angular with Auth0.
Read more about Angular user authentication with Auth0
Understanding @ngrx/component-store selector debouncing
In the next post on our list, Stephen Cooper takes an in-depth look at the debounce option for the selectors of the NgRx Component Store. The way it works is by allowing all changes within the same microtask to happen before emitting a final value.
Stephen’s post begins with a demo example which he walks us through to demonstrate this functionality, with two different selectors of which one is debounced and one isn’t. With debouncing, the app benefits from both improved performance and consistency.
In the second part of his post, Stephen then breaks down the code of debounceSync() to help us get a better understanding of how it works under the hood.
Read more about selector debouncing
Modern Angular
The last post from October that we’d like to mention is Nrwl's Victor Savkin’s overview of the Nx dev tools and how they can help streamline Angular development. Nx uses the latest linting and testing tools, i.e. Jest, Cypress and ESLint, and offers integration with Storybook for easy collaboration on shared UI components.
While Nx provides its own CLI, it can still be used through the Angular CLI, enabling developers to maintain their workflows. The Nx CLI only enhances it with computation caching and build coordination. On top of everything, Nx also optimizes the development experience by making it more integrated, with for instance GitHub integration and a VSCode plugin.
That’s it for our recap of October’s articles. Don’t forget to tune in next month when we’ll be rounding up our favorite content from this month.
