Angular 14 New Features

 

Angular 14 is the latest version of a popular web framework based on TypeScript. It was released on June 2, 2022, with the goal of simplifying and improving Angular development. Here are some of the exciting new features that Angular 14 brings:

1. Standalone Components: Now we can create components without the need for NgModules. This means less repetitive code and more flexibility in how we structure our components. Keep in mind that standalone components are in developer preview mode, so they may undergo some changes before becoming fully stable.

It will reduce need for using NgModules. we can add dependency directly on Component rather than Module.

In CLI command prompt we can generate standalone components like below

CLi Command Prompt(your Application Path)>ng generate component<name> --standalone

It can be experimented for small kind of projects but not big project as of now.

EX:-

@Component({

selector :'app-root',

standalone: true,

imports:[

ImageComponent,HighlightDirective, // Import standalone components,Directives,Pipes

CommonModule,MatCardModule // and NgModules

},

template:``

2. Typed Angular Forms: With this feature, we can improve the safety of our reactive forms by specifying the types of values inside form controls, groups, and arrays. Also, we can use schematics to gradually migrate our existing forms to take advantage of these type benefits.

we can use untyped form groups in angular 14 and it won't give any error if you select different types of data types.

 

EX:-

const cat = new UntypedFormGroup({

name: new UntypedFormGroup(

       first: new UntypedFormControl('Jaga'),

       last : new UntypedFormControl('Dees'),

      ),

       lives: new UntypedFormControl(9)

});

 

3. Easier Page Title Accessibility: Adding titles to our pages is now a breeze with the new Route.title property in the Angular Router. We no longer need additional imports or services to dynamically set the page title based on the route.

title can be used for route components easily with title property. We can make different title with every route.

Ex:-

const routes : Routes =[{

path: 'home',

component : HomeComponent,

title:'My App-home'

},

----

-----

we can provide title dynamically also.

4. New Tools in the Angular CDK: The Angular Component Dev Kit (CDK) has some exciting updates. In Angular 14, the CDK Menu and Dialog have reached stable versions, and we can now use new tools like FocusTrap, InteractivityChecker, and LiveAnnouncer to create more accessible components.
5. CLI Auto-Completion: The Angular CLI now supports tab completion in our terminal. This means we can easily navigate and use CLI commands with just a few keystrokes. We can also customize the output of CLI commands using flags like --verbose, --dry-run, and --help.
6. Improved Template Diagnostics: Spotting and fixing errors in our templates is now made easier. The error messages and suggestions have been improved to provide more helpful feedback. Additionally, we can use the ng-template-context-guard directive to get better context information for your custom directives and pipes.

Template gives us more Details for templates errors and warnings and helps to improve them.

Ex:-

Catch the invalid "Banana in a box"

. A common developer syntax

error Writing ([]) instead of [()]

7.       Angular CLI enhancements: -

Angular CLI just got better with some improvements! Now, using the CLI will be more consistent and straightforward.

 

Before, the CLI had different ways to specify arguments, which could be confusing. But now, everything is standardized and follows a simple format: we can use --lower-skewer-case for all the flags. This means no more juggling between different argument styles.

 

Also, we made things cleaner by removing the support for the older camel case arguments that were getting outdated. Instead, we've introduced combined aliases, which make it even easier to use the CLI.

 

To see all the options available to you, simply run "ng --help" in your terminal. The output will be clearer and more helpful, making it easier for you to understand and utilize the power of Angular CLI!

8.       ng completion: - Typos are one of the most common reasons a command-line prompt throws an error

ng completion introduces real-time type-ahead autocompletion!

With these updates, Angular 14 aims to make web development smoother and more enjoyable for developers. Happy coding!