This content originally appeared on DEV Community and was authored by Sandeep Balachandran

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

In order to update your global angular,

npm i -g @angular/cli

✅ 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. 👈

• 👉 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

✅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

• 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
  • 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

This content originally appeared on DEV Community and was authored by Sandeep Balachandran

Print Share Comment Cite Upload Translate Updates

APA

Sandeep Balachandran | Sciencx (2022-06-03T16:51:19+00:00) ⭐Angular 14 Features ⭐. Retrieved from https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/

MLA

" » ⭐Angular 14 Features ⭐." Sandeep Balachandran | Sciencx - Friday June 3, 2022, https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/

HARVARD

Sandeep Balachandran | Sciencx Friday June 3, 2022 » ⭐Angular 14 Features ⭐., viewed ,<https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/>

VANCOUVER

Sandeep Balachandran | Sciencx - » ⭐Angular 14 Features ⭐. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/

CHICAGO

" » ⭐Angular 14 Features ⭐." Sandeep Balachandran | Sciencx - Accessed . https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/

IEEE

" » ⭐Angular 14 Features ⭐." Sandeep Balachandran | Sciencx [Online]. Available: https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/. [Accessed: ]

rf:citation

» ⭐Angular 14 Features ⭐ | Sandeep Balachandran | Sciencx | https://www.scien.cx/2022/06/03/%e2%ad%90angular-14-features-%e2%ad%90/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.