The other day, while talking with my brother about my experience doing angular interviews, a few advanced concepts came up that I thought would be useful to share with a little more details in an article.
Lazy loading, resolvers, and content projection are the three that I found most interesting and worth learning about.
Lazy-loading
Lazy loading is perhaps the most well-known and widely used of the three, I wanted to include it because it makes a noticeable difference in any angular application when it’s used.
Angular eagerly loads all of the modules included in the app module by default. This means that all the code for all the modules is included in the initial app bundle shipped to the client, regardless of whether the code is used or not.
Lazy loading takes a different approach in that the initial bundle only contains the main module and the requested page; additional modules are loaded only when their respective routes are activated. This results in a significantly faster application and a better user experience.
Here’s a snippet from the official documentation on lazy loading:
Resolvers
Route resolvers are special services that can be assigned to a route and are responsible for fetching data before the route's component is initialised.
Resolvers are meant to encapsulate data fetching and mapping logic and reduce the risks of getting undefined reference errors in the component.
The only drawback to using resolvers is the blank white screen displayed during navigation until the resolver completes. This issue is absent when fetching data in the onInit of the component because a loading state can be defined instead.
For a more in-depth read about resolvers, refer to this article.
Here’s a snippet from the official documentation on resolvers:
Content projection
Third on our list is content projection. This pattern is especially useful for creating reusable components by projecting some custom content directly into the template of a child component using the <ng-content> directive.
It can be viewed as an alternative to manipulating HTML content using @Inputs and *ngIfs. It also allows you to project multiple sets of content identified by a select attribute. Content projection is explained in detail in the official angular documentation.
Here’s a snippet from the official documentation on content projection:
Takeaway
Knowing the three advanced angular concepts covered in this post, among others, is a key differentiator between novice and experienced angular developers. Learning about them will undoubtedly benefit you, just as it did for me in a few interviews.