Post
Ask Question

Angular 13 Latest Features

Introduction

In this article, we are going to see the angular 13 latest features. 

  • TypeScript 4.4 Support in angular13 
  • Form Validation Improvements  
  • Changes to APF 
  • Enhancements to Angular Tests  
  • 100% Ivy and No More Support for View Engine  
  • End of IE11 Support  
  • Update Component API’s  
  • Router Improvements  
  • Improvements in Angular CLI 
  • Framework changes and dependency updates 
  • Inline Support for Adobe Fonts 
  • Improvements in Localization 

TypeScript 4.4 Support in angular13 

They have stopped supporting TypeScript 4.2 and 4.3 in angular latest versions. They now support  TypeScript 4.4 for angular 13. It means now we can use many fantastic language features. One breaking change in TypeScript 4.4 that is advantageous for Angular apps is that it no longer implements setters and getters to get a similar type. 

Form Validation Improvements 

In angular13 one of the new features, Form Control Status, was introduced and it is used to apply to better check on form controls. Previously we could find the valid and invalid status. Now we can also find  'Enabled', 'Disabled’ and ‘Pending’. 

Enabled

It is showing form control status is enabled when control is including any values in the controls. 

Disabled

It is showing form control status is disabled when control is excluded from any computations or calculations of validity. 

Pending

It is showing form control status is pending when async validation is happening and errors do not yet exist for typed value. 

Changes to APF 

The Angular Package Format (APF) improvements are below. 

  • The output size is small and faster execution 
  • Removed old output formats, including View Engine metadata 
  • Libraries built with the latest version of the APF will no longer require the use of ngcc. 

Enhancements to Angular Tests 

This time the Angular team has made some new changes for TestBed that currently functions properly to tear down test environments and modules after every test. 

The DOM is now cleaned after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests. 

beforeEach(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
        teardown: {
            destroyAfterEach: true
        }
    });
});

100% Ivy and No More Support for View Engine 

Angular 13 does not support the View Engine. The all-new version is now 100% Ivy. Now that there is no View Engine-specific metadata or older output formats, it eliminates the codebase complicacy and maintenance costs in Angular 13. Now Angular can reduce its reliance on ngcc. And Faster compilation because metadata and summary files are no longer included. 

End of IE11 Support 

Now angular applications will be smaller and load faster because we can remove IE-specific polyfills and code paths.  

Pollyfills helps to provide support to load applications on old browsers. It helps to provide differential loading. 

Differential loading helps to support the web application run on multiple browsers. These changes affected people who are still using old browsers like IE11. 

Update Component API’s 

The old versions of angular take lots of code while creating dynamic component creations. Now this API is very simplified and reduced the codes like ComponentFactoryResolver.  

Please refer to the code below to create dynamic components in angular 13. No need for the commanded code. It old version code for our reference. 

export class AppComponent {
    constructor(private ViewContainerRef: ViewContainerRef) {}
    // private componentFactoryResolver:  ComponentFactoryResolver
    createnewComponent(MyNewComponent: any) {
        // const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
        this.ViewContainerRef.createComponent(MyNewComponent)
    }
}

Router Improvements 

In angular old version if we give any null or undefined value to routerLink it will be redirected to the same page. No option to stop this navigation. But in angular 13 we are able to stop the navigation while passing null or undefined routerLink values. 

A new option called canceledNavigationResolution is added to the router. It helps the router to restore the state when navigation is canceled. The routerLinkActive now has a new output isActiveChange. It is an event emitter and returns a Boolean value. Return true when the link is hit or gets active and return false when the link becomes inactive. 

Improvements in Angular CLI 

Angular 13 supports the use of persistent build-cache by default for new angular 13 projects. Introduced esbuild, which now works with terser to optimize global scripts.esbuild supports CSS source maps and can optimize global CSS, as well as optimize all style sheets. 

In the feature enable to angular.json file please follow the below code. 

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "cli": {
        "cache": {
            "enabled": true,
            "path": "cache",
            "environment": "all"
        }
    }
}

Framework changes and dependency updates 

In Angular old versions any current applications utilizing RxJS v6.x will need to update manually using the npm install [email protected] command. 

But now angular 13 RxJS 7.4 is now the default for apps created with ng new.  

Inline Support for Adobe Fonts 

In angular 13 inline fonts can improve your app performance by speeding up the First Contentful Paint. 

Now we can get access to everybody by default. But we need to give ng update command. 

Improvements in Localization 

Localize is a consistent API. Developers use it to produce an effective way for in-built internationalization (i18n) and tag messages for translation in code and templates. 

Angular 13 update 

If you need to update the old versions of the currently working project you can easily update to angular 13. Enter the command ng update to update the angular project to the latest version. If you update the angular 13 main focus time things will be less complex and there will be  improved application performance as well. I hope this article is most helpful for you. 


Similar Articles