Angular 14: Key Highlights of Angular

SREELEKHA C P | September 13, 2022

Angular 14: Key Highlights of Angular
Key Highlights of Angular 14

Angular, a typescript-based web application framework is Google’s most advanced and brilliant creation. Google has released its latest version, which is Angular 14. Here we’re going to describe what Angular 14 has brought for Angular developers in terms of updates and features. The Angular 14 version was released, and like every new version, it, of course, also introduces a couple of simple changes and minor new features and improvements. Version 14 introduces a number of new features. Typed Forms and Standalone Components. In this article, we’ll take a look at these two big new features.

Angular 14 is at last here after the progress of its predecessor, Angular 13. The Type-script-based web application system is the next significant Google release. Angular 14 has shown up with stand-alone components, promising to streamline Angular app development by diminishing the requirement for Angular modules. The upgrade from Angular 13 to Angular 14 introduces advanced opportunities for typed forms, improved template diagnosis, and stand-alone components. Angular 14 is accepted to be the most systematic pre-planned upgrade by Angular. The Angular 14 delivery highlights include CLI auto-completion, typed reactive forms, stand-alone components, directives and pipes, and enhanced template diagnostics. The highlight of this update is that the Angular experts have carefully seasoned out the need for Ng modules, reducing the amount of boilerplate code required to start the application. Before discussing the Angular14 features, let us contrast Angular 13 with the new Angular 14 updates.

Typed Forms : Angular 14

Angular 14 was designed with one goal in mind: to make forms more user-friendly. Here I’ve got a standard form using the Reactive Forms approach, which is offered by Angular. In Angular, you can handle forms with the template-driven approach or by using the reactive approach, and we are using the reactive approach here because Typed Forms only apply to Reactive Forms, not to Template-driven forms. There is no change to template-driven forms.

Now, here for Reactive Forms though, the HTML code is the same as it would have been for Angular 13,12,11, and so on. So this code does not change as follows

   <form [formgroup]="form" (ngsubmit)="onSubmit()" >
     <div>
       <label for="email" style="color:black">Email </label>
       <input id="email" type="email" formcontrolname="email">  
     </div>
     <div>
       <label for="email" style="color:black">Age </label>
       <input id="age" type="number" formcontrolname="age">  
     </div>
     <button style="color:black">Submit </button>
   </form>

If you have a look at the Typescript code for this component, the code also doesn’t change that much.

  export class AppComponent{
    form=new FormGroup({
      email:new FormControl(null),
      age:new FormControl(null)
    });
  }

Here, I am creating a form group with an email and a date form control, and I’m connecting this form group and then the individual controls to my HTML elements. However, we’ll see a difference if we then try to work with our FormGroup here in the typescript code. For example, upon form submission, we might want to log or send the individual form-controlled values to a server or to the console here in this case. Here are two controls in that form group, and they are both null initially, but I’m not passing any other information to typescript. This implies that they are always null, so there can never be any other value inside of such a form control besides null.

FormControl is now a generic type where we can specify which values can end up in that form control. Here we could say that it’s a string or null as follows,

  form=new FormGroup({
    email:new FormControl<string|null>(null),
    age:new FormControl<number|null>(null)
  });
  </number|null></string|null>

For email, we could say that it’s maybe a string/null that would be possible here, and for age, we could say that it’s maybe a number/null. [The idea behind typed forms is simply that you have more type safety in your code, that we’re not operating on any type as much because the problem with type any is that all code looks fine whilst you’re writing it, but our app could crash in certain scenarios at runtime.]

Standalone Components.

It is one of the most amazing features added to Angular in a Long Time because it has the potential of making writing Angular apps much simpler and easier than today. The idea behind standalone components is that you can get rid of NgModules.

  @NgModule({
  Declarations:[
      AppComponent
    ],
    Imports:[
      BrowserModule,
      ReactiveFormsModule
    ],
    Provider:[],
    Bootstrap:[AppComponent]
  })

  Export class AppModule{ }

Now let’s see how migrate the appComponent to be a standalone component without requiring NgModule.To make this work,we have to add new flag to the @Component decorator configuration here, the standalone flag, and we have to set this to true. After adding this flag here,we have to add all the imports and providers that are required by that component to this component.This component doesn’t need any providers but it needs some imports. So there is no declarations array which we add here, as we have it in NgModule. If this component used other components, they would also be added to imports here. After this you can get rid of this AppModule.

  @Component({
    standalone : true,
    imports    : [ReactiveFormsModule],
    selector   : ’app-root’,
    ...........
    ...........

Now since this was the AppModule our root module for the root component, we also have to bootstrap the application differently.

In main.ts, instead of bootstrapping it like this,

  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err=>console.error(err));

We bootstrap by calling bootstrapApplication, which is imported from

  @angular/platform-browser,
  bootstrapApplication(AppComponent);

bootstrapApplication is a function that is called and to this function, we now pass the root component of our application, in this case, the AppComponent which also has to be imported from the AppComponent file. This is how to bootstrap our application if our root component is a Standalone Component.

Conclusion

Typed Forms and Standalone components are the two most exciting features of Angular 14. Typed Forms/Typed Reactive forms can help us make our code safer and catch errors earlier. Now, Standalone components are not fully there yet. it’s in preview and features might still change in certain aspects however this feature has the potential of making Angular way more awesome and allowing us to build way leaner Angular apps in the future.

Does your Project Demand Expert Assistance?

Contact us and let our experts guide you and fulfil your aspirations for making the project successful

contactUs_img