Top Angular blog posts from May 2020
Like every month, various members of the Angular community have produced some excellent pieces of Angular content in May. Here are some of our top picks - enjoy the read!
Angular ❤️ Bazel leaving Angular Labs
We kick off May’s list with a post by Alex Eagle announcing that Bazel is moving away from being an Angular-focused to a framework-agnostic build tool, working with any front-end framework or Node.js backend.
There were a couple key reasons behind this decision. The first is the fact that most Angular apps don’t even have the problem Bazel excels at solving, so using it would just add a redundant step. The other is that, because Bazel can run any toolchain, any app that works with the Angular CLI should also work with Bazel.
Alex also explains the process of generalizing Bazel before finishing with what this entails for Angular developers. Good news - if you’re currently satisfied with the CLI, the change essentially won’t affect you.
How to set up an Nx-style monorepo workspace with the Angular CLI
Moving on, we have a detailed five-part series by Lars Gyrup Brink Nielsen on setting up an Nx-style monorepo workspace using Angular’s CLI, rather than the Nx CLI.
Part 1 focuses on creating an application project, an end-to-end test project, and a feature shell library. In part 2, Lars shows how to create a custom generate project tool and use it to create the shared booking and data access libraries with NgRx.
In part 3, we create the passenger info and flight search feature libraries, the mobile booking app and a mobile version of the flight search component template. In part 4, we use the generate project tool to create the check-in data access library, and then generate the mobile check-in app.
Finally, part 5 wraps things up by showing how to create the seatmap domain, the shared buttons UI library and the shared formatting utilities library.
Read part 1 (links to other parts at the bottom of the post)
I had to learn Angular 8 in 24 hours, here is how
Third on our list this time, this post by Evelyn Bauer is a great resource for people who need to quickly get started with Angular. She shares her own experience and tips that helped her get acquainted with Angular 8 in a mere 24 hours. She breaks down her learnings into three essential steps.
The first thing Evelyn suggests is becoming familiar with the structure of an Angular project. Just as important is understanding Angular’s building blocks (modules, components, templates and data binding). Then, of course, you need to try things out on your own, experimenting as much as possible on a low-stakes and/or personal project to get more experience.
Getting Started with Azure Static Web Apps
This next post is not really Angular-specific, but we felt it touches upon a feature that’s important enough in the front-end development world that it deserves to be included.
Written by Dan Wahlin, the post introduces and provides a comprehensive overview of a new Microsoft service - Azure Static Web Apps - which greatly facilitates the deployment of modern JavaScript-based applications. The only real prerequisite is having a Microsoft Azure account.
Dan gives a step-by-step guide to using Azure Static Web Apps, detailing each step, and then also recaps his experience with using the service to launch a sample Angular app. He finishes with some further points of exploration and some additional resources.
Scully or Angular Universal, what is the difference?
Next up, we have another post concerning static sites, written by Sam Vloeberghs. It’s part of a four-post series about Angular’s new static site generator Scully (all the parts can be accessed in part one, linked at the top of the page). Part three focuses on the differences between Scully and the pre-existing solution for server-side rendered Angular apps, Angular Universal.
Sam takes a detailed and unbiased look at how both tools function, the major differences between them, and the main considerations for each. He points out that each is suited to different use cases, with some of the main decision factors being the number of third-party dependencies used and the number of pages in the application.
Different Ways to Pass Inputs to a Component in Angular
We continue with a post by Netanel Basal in which he presents three different ways of passing data to an Angular component. While he uses a select component in the example, the methods employed work with any kind of component.
The first method shown is using the Input decorator, but it is not very flexible. In order for the user to be able to override inputs at a global level, the dependency injection feature of Angular should be used. The last method Netanel’s post looks at is using directives, which can serve as a single source of truth for every place where the component is consumed.
Code-sharing made easy in a full-stack app with Nx, Angular, and NestJS
Almost at the end of May’s recap, we have a post on inDepth.dev, written by Mateus Carniatto and showing how to create a full-stack application, with code shared by the front and back end to avoid duplication. He works in a Nx workspace, where he creates a Journal app with Angular and NestJS, which are both TypeScript-based.
After creating the workspace, we need to create the NestJS API and run it, then create the Journal application. Since we want to avoid code duplication, we also need to create a shared types library containing the types used by the front end and back end, which allows us to make the best use of TypeScript.
Effortless Web Storage Persistence in Angular Forms
We finish with another post by Netanel Basal, this one showing how to easily implement web storage persistence in the values of Angular forms. This would enable users who fail to submit an already filled out form (due to a session timeout or some other reason) to persist the right form values and provide a much better user experience.
First, we need to take care of the storage implementation by creating a base StorageService provider which can be used with any type of storage. After the storage, we need to create and implement the directive for persisting the form values via that storage. In case we need to persist form values with every value change, Netanel covers that as well.
This concludes our recap of May’s top Angular posts. If you enjoyed it, have a look at some of our other Angular-related blog posts!
