What’s New in Angular 14? Important Features and Examples

Angular 14, a new version of the TypeScript-based web application framework, angular 14 release date is 2nd June 2022. Prior to the previous versions of Angular 13, Angular 14 is considered to be the systematic pre-planned upgrade of Angular.

Web app development is made easy and quick with the introduction of new Angular 14 features like stand-alone components, which eliminates the use of ng modules.

It’s just short information about what’s new in Angular 14. We have come up with detailed information and examples to make it easy for the AngularJS developer to deal with Angular development.

Angular 14 Features

As we all are aware of what is Angular, it’s time to explore the Angular 14 features introduced officially by the Angular development community.

1. Standalone Components

   The components are not dependent on any other components and are referred to as Angular 14 standalone components.

   The components of Angular 13 and the previous versions depended on the ngModules. So, for example, if you want to include or use any additional module, pipes, services, or even directories in the component, you need to import all such things in the module file.

   But in Angular 14, the scenario is entirely different. How? Let’s see a simple example of creating an Angular 14 standalone component. First, we will create one component, “HomeComponent”, as a standalone by using the command.

   ng generate component HomeComponent — standalone

   Copy

   D:\angular-14-application>ng generate component HomeComponent --standalone
   CREATE src/app/home-component/home-component.component.html (29 bytes)
   CREATE src/app/home-component/home-component.component.spec.ts (644 bytes)
   CREATE src/app/home-component/home-component.component.ts (401 bytes)
   CREATE src/app/home-component/home-component.component.css (0 bytes)
   
   

   Inside the HomeComponent file, you’ll see “standalone: true”, which means that this is the standalone component in your application.

   Copy

   //home-component.component.ts
   import { Component, OnInit } from '@angular/core';
   import { CommonModule } from '@angular/common';
   
   @Component({
     selector: 'app-home-component',
     standalone: true,
     imports: [CommonModule],
     templateUrl: './home-component.component.html',
     styleUrls: ['./home-component.component.css']
   })
   export class HomeComponentComponent implements OnInit {
     constructor() { }
     ngOnInit(): void {
     }
   }
   
   

   So, you can easily import whatever stuff, like services, directories, and pipes, inside this component.

   Planning To Build A Robust SPA For Your Business?

   Albiorix is a top-rated Angular development company having a team of talented developers to provide the best optimum IT solutions.

   Contact Us

   

   Let’s say you have 20 components in a single module. And in one component, you must import multiple services, directives, or whatever. So, it becomes mandatory for you to import all such services or directories inside the “app.module.ts” file, which applies to all the 20 components included in the application. Your application will load more, resulting in lower performance. Correct?

   But Angular 14 makes it easy for the developers to import specific services or directories within a particular component.   One drawback of this standalone component is that it does not have a stable API, and there are more chances of potential changes to it.

   Related Post: What is Promise in Angular

2. Typed Angular Forms

   As we know, Angular typically consists of Template-Driven and Reactive Forms. So far, in Angular 13’s reactive forms. Let’s say you define a type of Reactive form and you want to update its value to another. It’s simple, but it’s not a good practice in Angular as it strictly uses TypeScript programming language.

   To make it easy for the developers, Angular 14 introduced Typed Angular Forms. It uses strictly Typing and strongly eliminates the implementation of strict typing for the Angular Reactive Forms Package.

   Angular 14’s Typed forms aim to ensure that the values inside form controls, groups, and arrays are type-safe across the API surface. It helps Angularjs developers to enable safer forms, especially for deeply nested complex cases.

   The excellent part of Angular 14 is that it allows the developers to use “UnTypedFormGroup” if they do not want to use Typed Forms.

3. Streamlined Page Title Accessibility

   In Angular 13 and the previous version, it was challenging for the developers to change the title of different pages in the application. 

   Angular 14  allows the developers to add the title of every page by using the “title” property  as shown below.

   Copy

   const routes: Routes = [{
     path: 'home',
     component: HomeComponent
     title: 'My App - Home'  // <-- Page title
   }, {
     path: 'about',
     component: AboutComponent,
     title: 'My App - About Me'  // <-- Page title
   }];
   

4. Extended Developer Diagnostics

   This feature of Angular 14 is really a boon for Angular developers. For example, if there is an error in any file except the template file, it will not throw any error. Sound astonishing?

   In the below code, we have added some text in the “ts” file, and we can see the error line.

   Copy

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent, abcdef
     ],
     imports: [
       BrowserModule,
       AppRoutingModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   
   

   Likewise, in the template file, we are not getting any red lines:

   Copy

    :host {
   Font-family: -apple-system, BloinkMacSystemFont, "Segoe UI", Roboto, Helvetical, Arial, Sans-Serif
   Font-size: 14px;
   Color: #333;
   Box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; abcdef
   }
   

   New extended diagnostics provide an extendable framework that gives you more error details in your templates and suggests how you can improve them. Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

5. Banana in a box” Error

   The “Banana in a Box” error is a common mistake Angular developers encounter when implementing two-way data binding. In Angular, the correct syntax is [()], where square brackets represent property binding and parentheses represent event binding.

   If you mistakenly write ([]) instead of [()], you’ll get a syntax error. The term “banana in a box” humorously refers to how the correct syntax looks—like a banana inside a box.

   For developers working in an AngularJS development company, this error is familiar. To help, Angular 13.2 introduced improved error messaging within the CLI and code editor, making it easier to catch and fix this issue quickly.

6. Catch nullish coalescing on non-nullable values

   In Angular templates, developers may encounter warnings related to the nullish coalescing operator (??). This typically happens when using ?? on values that are marked as non-nullable, meaning their type does not include null or undefined.

   Angular 14 introduced extended diagnostics that catch these cases to help improve code reliability. These warnings appear during commands like ng build and ng serve, and also within the Angular Language Service in real time.

   To manage these diagnostics, developers can adjust settings in the tsconfig.json file. Here, you can choose whether such warnings are treated as errors, simple warnings, or suppressed entirely. This helps maintain clear and effective coding practices.

7. Angular CLI Enhancements

   With the launch of Angular 14, more consistency across the Angular CLI has been added to the developers by standardized CLI argument parsing. Moreover, the developers can include –lower-skewer-case format in every flag.

   With Angular 14, a feature has been initiated that has removed deprecated camel case arguments support and added support for combined aliases usage.

   1. ng completion

      Many times, it happens that the developers give the command “ng sevre” instead of “ng serve”. But, of course, it’s a typo, and it is not a big deal. And such typos mistakes throw an error in the command line prompt. 

      Considering the points from the Angular developer’s community, Angular 14 introduced a new ng completion that introduces real-time type-ahead autocompletion!

      To ensure all Angular developers know about this, the CLI will prompt you to opt-in to autocomplete during your first command execution in v14. You can also manually run ng completion; the CLI will automatically set this up for you.

   2. ng analytics

      The CLI’s analytics command allows you to control analytics settings and print analytics information. The more detailed output clearly communicates your analytics configurations and provides our team with telemetry data to inform our project prioritization. It sincerely helps a lot when you turn it on!

   3. ng cache

      ng cache provides a way to control and print cache information from the command line. You can enable, disable, or delete from disk, and print statistics and information.

   Related Post: Resolver in Angular

8. Angular DevTools is Available Offline and in Firefox

   The Angular DevTools debugging extension now supports offline use, thanks to a community contribution by Keith Li. For Firefox users, find the extension in the Add-ons for Mozilla.

How To Install Angular 14?

The first step is to install Angular 14 using npm. Just execute the following command in the CLI.

D: \> npm install - - global @angular/cli@next

How to Upgrade to Angular 14?

Read out the instructions on its official website to upgrade your Angular application to Angular v14 – https://update.angular.io/

Additional Summary

• Along with this release, we have updated the public Angular 14 roadmap to reflect the status of current and future team projects and explorations.
• TypeScript versions older than 4.6.0 are no longer supported.
• Reactive form types such as FormControl and FormGroup now have generic type parameters and infer stricter types. A migration will convert existing usages to new Untyped-prefixed aliases which preserve the existing behavior.
• Make sure you are using Node 14.15.0 or later.

Conclusion

As we’ve seen, Angular 14 is becoming more powerful for the developers as it includes features running from typed forms and Angular 14 standalone components to new primitives in the Angular CDK (component dev kit)

We’ve gone through the detailed information about every feature explained with examples to get information about the Angular 14 features. 

I hope this will help you with your upcoming/existing project using the latest Angular14 version.