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)

Now it's your turn.

Β 
πŸ—’ Share a tutorial
πŸ€” Reflect on your coding journey
❓ Ask a question
Β 
Create an account to join hundreds of thousands of DEV members on their journey.