⭐Angular 14 Features ⭐
Tags: javascript, angular, beginners, webdev
Published: 2022-06-03 16:51:19

---
title: ⭐Angular 14 Features ⭐
published: true
description: Angular 14 features
tags: javascript, angular, beginners, webdev
series: Angular Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki22062w2oy9ys97up8y.gif
---

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




<h1> How to update to version 14</h1>
Visit <a href="https://update.angular.io">update.angular.io</a> for detailed information and guidance. To have the best update experience,

Update to 14
```cmd
ng update @angular/cli @angular/core
```

In order to update your global angular,
``` cmd
npm i -g @angular/cli
```

<center><h2><u>What’s in this release?</u></h2></center>

## ✅ Simplifying Angular with Standalone Components 👌
* [Angular standalone components](https://angular.io/guide/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](https://gist.githubusercontent.com/twerske/6fa8f71a37cf28a24c439e01325784a4/raw/ce2097de9bbf19c7d7125b88f708cf40f9352f34/main.ts). 👈
  
![standalone compnoent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyzn2ah85uqca9kc951p.png)



* 👉 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](https://stackblitz.com/edit/angular-standalone?file=src%2Fmain.ts) 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](https://github.com/angular/angular/issues/13721)
* 👉 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](https://gist.githubusercontent.com/twerske/4f9f18f748584abd8edc3e608482922d/raw/62a49a22d22cc7aa8318fbcf9e5166f129a233ed/typed-angular-forms.ts)

![Typed Angular Forms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7nl09r2bozpo0kym55s.png)

* **Motivation** behind typed angular forms can be found 👉 [here](https://github.com/angular/angular/discussions/44513)



## ✅ 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](https://gist.github.com/twerske/16f4d998c5b87c589cd2b6ec015f8732/raw/f34ecd959b1b99764f235761e0d2e717bbcd5a37/app-routing.module.ts)
    ![Streamlined page title accessibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/peb4si656qffmyhv8cgf.png)
    * 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](https://angular.io/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](https://github.com/angular/angular/discussions/44513)
 [Official Reference](https://angular.io/extended-diagnostics/NG8101)
### 👉 Catch nullish coalescing on non-nullable values 👉 [here](https://github.com/angular/angular/discussions/44513)
 [Official Refernce](https://angular.io/extended-diagnostics/NG8102)

### 👉 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](https://addons.mozilla.org/en-US/firefox/addon/angular-devtools/).
 

## ✅ 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 : <a href="https://blog.angular.io/angular-v14-is-now-available-391a6db736af">Official Announcement 😄</a>

Changelog : <a href="https://github.com/angular/angular/blob/master/CHANGELOG.md"> Repository </a>