Get Excited for Angular 14
The Angular blog released an article earlier this month talking about all the awesome new features in Angular 14. I would highly encourage you to check that out here: https://blog.angular.io/angular-v14-is-now-available-391a6db736af
The author of that article did a pretty great job describing all of their new features, so I really wanted to show which features I’m excited to try and which ones are just ok.
Typed Forms
The first feature that really caught my eye was typed forms. To quote Emma:
Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface. This enables safer forms, especially for deeply nested complex cases.
As a guy who uses forms quite a lot, this was really exciting. I always struggled with data types coming out of forms and since Angular uses TypeScript it’s nice to see that we get to take more advantage of a type system with our forms.
Let’s have a peek at what typed forms look like.
So far, nothing out of the ordinary. We have a form you might see on any website. The most noticeable change is that we can add a type to the Form Controls. When we hover over it in Visual Studio Code we can even see the types of the Form Control.
When we try to get a specific control, the type we gave it still comes through.
When we ask for the value we can see that we get either a null or T.
How does this all differ from how it was before? Fortunately, the Angular team thought about that, as they usually do, to ensure that there is full backward compatibility.
So if we wanted to use the old version we can, but there is really low adoption effort for this awesome new feature, especially since you can use the ng update command to change all of the Forms to Untyped Forms in like a second.
Standalone Components
Since standalone components are a preview feature I just wanted to get a feel for how they would work. I will only be talking about standalone components at a high level, you can read the full guide here: https://angular.io/guide/standalone-components
The whole idea of standalone components is to make components, pipes, and directives totally independent of NgModules. Meaning that you can add your component directly to the imports of another component. Let’s see what that would look like.
This new feature is an attempt to limit how much you have to rely on modules when making your app.
I have conflicting feelings about this feature. On one hand, I think it could be really cool. I have worked with Angular Elements quite a bit and I can see this being an awesome feature to include in that ecosystem. On the other hand, I can see this feature somewhat muddying the waters in larger applications.
I generally see NgModules as an organizational structure for your application. They help me wrap my head around which boxes go where.
In this example, we have an App Module and an App Routing module. The App Routing module tells the app that we want to go to the Home Module and the Home Module uses the Input Module. Everything has its own box and we can easily tell which boxes have what and where everything comes from.
Let’s say we change the chart above to instead of Input Module, it is now Input Component. The Input Component uses the FormsModule, Reactive Forms Module, etc. This was just to supply a simple text input. But let’s say we wanted to expand to have multiple inputs. With standalone components you’d have something that looks like this
Now the Radio Input Component uses a bunch of similar modules (Forms Module, Reactive Forms Module, etc.) as the Input Component. Whereas, using the Module method you can simply create a new component under the Input Module. That’s just how I think of my applications, you may have a different mental model from me. One potential upside I can see is more explicit imports into your components and modules. The only thing with that is that there may be a ton of them.
As I mentioned earlier, this is still a developer preview feature, so there is more yet to come with standalone components.
Honorable Mentions
I was really excited to see that the page title was becoming easier to change dynamically as your route around your application. You can now define a title directly in your routes config.
So whenever you hit that specific route, your page title will change to “My Awesome App”. This is awesome, especially if this is something you’ve been struggling with in the past. In general, the easier accessibility is to put into your application the better off you will be since more people will have an easier time using your application, so I think this feature is quite noteworthy.
However, I have it as an honorable mention because while it’s awesome for accessibility it still doesn’t really help with SEO. Since Angular is an SPA framework, it is rather difficult to do dynamic SEO. You could use this new feature in conjunction with SSR like Angular Universal to achieve a more SEO-friendly approach.
I would strongly recommend reading the article I linked to at the start of this article as it has a full list of features that you can use in Angular 14.
If you’ve enjoyed this article, I’d love for you to join my mailing list, where I send out additional tips, tricks, and newsletters!
