DEV Community

Cover image for ⭐Angular 14 Features ⭐
Sandeep Balachandran
Sandeep Balachandran

Posted on

⭐Angular 14 Features ⭐

Hey there,

Version 14.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

TL;DR 🙌

Simplifying Angular with Standalone Components

Typed Angular Forms

✅ Streamlined best practices

✅ Extended developer diagnostics

✅ Built-in improvements

✅ Angular material component updates

✅ Angular CLI enhancements

✅ Docs Updated | Docs updating | Docs will be updated

How to update to version 14

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 14

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

In order to update your global angular,

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

What’s in this release?

✅ Simplifying Angular with Standalone Components 👌

  • Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.
  • 👉 In v14, standalone components are in developer preview.
  • 👉 They are not stable API yet and will be potentially changed. But available to exploration and development.
  • As per the official announcement an example of usage can be found over here. 👈

standalone compnoent

  • 👉 In component decorator you are able to make directives and pipes standalone by standalone: true flag which allows you to add imports directly in your @Component() without an @NgModule()
  • Explore stackblitz demo 👈 for more
  • We can create standalone component using CLI as follows
  ng generate component <name> --standalone

Enter fullscreen mode Exit fullscreen mode

✅Typed Angular Forms

  • 👉 This feature was under the radar for a while now. The issue can be found here
  • 👉 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.
  • Official gist is available here

Typed Angular Forms

  • Motivation behind typed angular forms can be found 👉 here

✅ Streamlined best practices

  • ✅ 👉 Streamlined page title accessibility
    • It is a best practice to ensure that your app’s page titles uniquely communicate the page’s contents.
    • v13.2 streamlines this with the new Route.title property in the Angular Router.
    • Adding a title now requires no additional imports and is strongly typed
    • gist can be found here Streamlined page title accessibility
    • In these examples,
      • 👉 navigating to ​​‘/about’ will set the document title to ‘My App — About Me’
      • 👉 while navigating to ‘/home’ will set the document title to ‘My App — Home’.

✅ Extended developer diagnostics

  • New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them.
  • Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

👉 Catch the invalid “Banana in a box” error on your two-way data bindings 👉 here

Official Reference

👉 Catch nullish coalescing on non-nullable values 👉 here

Official Refernce

👉 Tree-shakeable error messages

✅ More built-in improvements

  • Bind to protected component members - you can now bind to protected component members directly from your templates,
  • Optional injectors in Embedded Views
  • NgModel OnPush - NgModel changes are reflected in the UI for OnPush components.

✅ Angular CLI enhancements

  • Now every flag uses --lower-skewer-case format
  • Removed deprecated camel case arguments support and added support for combined aliases usage
  • 👉 ng completion
    • v14 introduces real-time type-ahead autocompletion for command such as ng serve!
  • 👉 ng analytics
    • The CLI’s analytics command allows you to control analytics settings and print analytics information
  • 👉 ng cache
    • ng cache provides a way to control and print cache information from the command line.

✅ Angular DevTools is available offline and in Firefox

  • The Angular DevTools debugging extension now supports offline use
  • For Firefox users, find the extension in the Add-ons for Mozilla.

✅ Experimental ESM Application Build

  • Finally, v14 introduces an experimental esbuild-based build system for ng build, which compiles pure ESM output.

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

Top comments (0)