Top Angular blog posts from December 2020
We’re back with an overview of some of the top articles from the Angular community written last month. Enjoy the read!
The Hidden Power of InjectionToken Factory Functions in Angular
We’re beginning this month’s recap with a blog post by Netanel Basal breaking down a lesser-known feature in Angular: the factory function of InjectionToken, which can be used as a provider of the token throughout the entire application. Moreover, it can also be used for obtaining references to other providers within it by using inject.
The resulting provider is tree-shakable, and using it with inject() is faster and safer than the traditional method with an extra array of dependencies. It makes sure that components don’t contain redundant data and it even streamlines testing by allowing us to return a mock value from the factory rather than provide mocks for everything.
Read more about InjectionToken factory functions in Angular
Taiga UI is a new Angular UI Kit that you should try
In the next post from December, Roman Sedov introduces Taiga UI, a new UI kit for Angular developed by him and Alex Inkin. It’s a modular system with several packages (CDK, core, a kit with components and an addon* package).
Taiga makes use of the concept of Secondary Entry Points, where entities can be imported both from the Primary Entry Point and any level deeper. This results in smaller bundle sizes, and avoids cyclic dependencies and things like unnecessary bindings between entities.
The library uses agnostic components and is very customizable, built following development standards and best practices. Roman promises more new features and content coming soon.
The ultimate migration guide to angular-eslint, ESLint and Nx 11
For the third post on this recap we have Lars Gyrup Brink Nielsen’s migration guide to angular-eslint, ESLint and Nx 11, published in his new dev.to publication This is Angular. He provides a detailed guide for different workspace configurations and different testing tools, and covers both the setup of a new Nx workspace as well as the migration existing ones.
Even though TSLint has reached its EOL, Lars still dedicates sections of the article to working with TSLint and Nx 10. Nonetheless, he recommends migrating away from it ASAP to be able to continue making the best use of new releases of TypeScript, Angular and Node.
Read more about migrating to angular-esling, ESLint and Nx 11
ngTemplateOutlet: The secret to customisation
Next up, we have an article by Stephen Cooper on inDepth.dev about using ngTemplateOutlet for creating customisable components. The example component which he works on is a dropdown selector (a shark-related one, which, let’s be honest, is really cool).
First Stephen goes through some of the less recommended methods for customizing the dropdown selector, e.g. using *ngIf or <ng-content> to display icons for different dropdown items.
Finally, he gets to the main part, ngTemplateOutlet, which uses context to make up for some of the shortcomings of <ng-content>. With this method, you’re able to use the same code for the dropdown selector which is then differently customized for each individual client.
Read more about ngTemplateOutlet
Incremental vs Virtual DOM
We continue with a comparison of the incremental DOM and the virtual DOM by Chameera Dulanga. He briefly goes over the concept of the virtual DOM, used by React, before focusing on the incremental DOM which Angular has adopted with the new Ivy rendering engine.
As Chameera points out, the main advantage of incremental DOM is its optimized memory usage. This is due to the fact that the incremental DOM is tree-shakable and to the fact that it doesn’t generate a copy of the DOM when the application gets rerendered. The only caveat is that this method is, by consequence, slower than with the virtual DOM.
Read more about incremental vs. virtual DOM
Binding CSS Variables in Angular
Moving on, we have another post by Netanel Basal, this one based on a recent tweet of his about binding CSS variables in Angular templates, which is made possible thanks to the Ivy rendering engine.
So, in Angular 9 and onwards, this is done with style in the template or with HostBinding in the component. If you’re using an earlier version of Angular, you can still achieve the same result by creating a special directive for binding variables.
Read more about binding CSS variables in Angular
Integrate Jest into an Angular application and library
We’re following that up with an article by Tim Deschryver on inDepth.dev about how to integrate Jest, the main testing framework for React, into an Angular project.
First you add Jest to the Angular application that you’ve set up; it’s wise to update the test script to now use Jest as the default test runner ("test": "jest") so you can easily run tests from the CLI. You also need to remove dependencies for Jasmine (if you’re not using Protractor) and Karma.
In the second part of his article, Tim then also shows how to integrate Jest into an Angular library and how to configure it to test the library and the application separately.
Read more about integrating Jest into Angular
Speed Up Your Angular Application with Code Splitting
The final post which we’d like to highlight is Ashnita Bali’s article on Telerik’s blog about improving the performance of Angular applications by using code splitting.
The focus on user experience has become even more important with Google’s introduction of Core Web Vitals, and it’s essential for an application to load fast even on slow networks. Since developers can’t really control network speed, they need to optimize their code.
In Angular, route-level splitting can be done with a simple CLI command, which separates the main.js bundle from the feature modules. This results in users only having to load code for the pages they visit, so the application performs better, and on top of that, users with limited data plans don’t have to pay extra for data they won’t even use.
Read more about code splitting in Angular
These were some of our favorite Angular-related reads from last month. Tune in early next month so you don’t miss our next Angular interview!
