Angular 13 Features
For Developers

Angular 13: Features and Updates

By November 29, 2021 4 min read

Almost five months after the last update, Angular released v13 on Nov 3, 2021, currently available as a production release. To get Angular 13, developers must run ng update in their project.

Angular developers, aka Angularites, were eagerly waiting for this Angular update as it removes the view engine entirely and provides a cleaner way to create components, among other things. 

This post dives deeper into the significant updates that are a part of Angular’s latest version. 

Angular 13 is now 100 percent Ivy 

Angular 13

Angular 13: 100% Ivy

Angular 13 has successfully removed the view engine; the framework is now 100 percent Ivy. As a result, faster compilation and increased productivity are now possible on the platform.

Developers who build libraries using Angular need to ensure that their code is up to date. In addition,  they must transition from “enableIvy:false” to “compilationMode:partial” to keep up with this Angular update. 

Angular 13 has a simplified API

In the previous version,  developers required a boilerplate to create code. Angular 13, with its IVY everywhere approach, allows developers to create code dynamically. 

Earlier,  one had to inject ComponentFactoryResolver into the constructor to create a component. Now, you can do so without creating an associated factory with the help of ViewContainerRef.createComponent. 

Here’s an example:

Angular 13 New Features

Angular 13: Components

Angular v13 features – Angular CLI improvements 

All new projects will have persistent build-cache toggled on by default in Angular 13.

As a result, there is a 68 percent improvement in build speed with more ergonomic options available.

Developers upgrading their projects to v13 must add the following code to angular.json to enable this feature. 

{

    “$schema”: “…”,

    “cli”: {

        “cache”: {

            “enabled”: true,

            “path”: “. cache”,

            “environment”: “all”

        }

    }

    …

}

Angular package format (APF) changes

Angular 13 has made several changes to the Angular package format. Older output formats, including View Engine-specific Metadata, have been removed, and modern JS formats like ES2020 have been standardized. 

Moreover, Angular 13 has updated APF to support node package exports, reducing developers’ reliance on internal APIs. 

In addition, Libraries in Angular 13 do not require ngcc, providing developers faster execution and leaner package output. 

IE11 is no longer supported. 

Acting on overwhelming feedback received in the RFC put out by the team, Angular 13 has finally removed support for IE11. 

CSS code paths, build passes, polyfills, special JS, and other infrastructure existing for IE11 will be eliminated. 

With this update, Angular can easily associate with evergreen browsers and Web APIs. 

What’s more, developers will leverage features like CSS variables and web animations, whereas users will experience faster loading and enhanced user experience. 

Angular 13 features – Component improvements 

Angular 13

Angualr 13: Larger touch target sizes

In Angular 13, Accessibility (ay11) is at the center of all the updates made to the Angular material components.

These include: 

  • Better ARIA descriptions 
  • Larger touch target sizes
  • High contrast styling mode for icon buttons 
  • More accessible matChipRemove 
  • Datepicker improvements 
  • Addition of default role to ‘table’ 
  • Stepper updates 
  • Strong focus option for slider 

Additionally, fake mouse down events are correctly detected from screen readers by FocusMonitor in this Angular update. 

Thus, whenever focus and click events happen on screen, your applications will rightly interpret them in v13.

Angular 13 features – Testbed updates 

The latest Angular update improves the testbed significantly, as the DOM is cleaned after every test. 

In addition to this, the testbed tears down test modules and environments in a more effective manner. 

Also, v13 enables the Angular testing module teardown by default. 

Therefore, developers using Angular 13 will get faster, less interdependent, memory-intensive, and optimized tests. 

What are the other updates? 

An Angular update a lot of community members are excited about is inline support for Adobe fonts.

This update will improve app speed and performance. The introduction of $localize docs is a prominent feature that provides an efficient method for i18n and tag messages.

Angular 13

Angular 13: Typescript 4.4

Other notable updates in Angular 13 include: 

  • Typescript 4.4 support
  • Improved error messaging 
  • Default RxJS 7.4 for apps created with ngnew
  • Dynamic enabling and disabling of built-in validator 
  • The introduction of FormControlStatus for forms 
  • New type support for language service. 

Summary 

Apart from delivering on the Ivy everywhere promise made in Angular 12 and removing the View Engine altogether, Angular 13 has many impressive features and updates. 

The framework has become more efficient with inline support for adobe fonts, simplified API, $localize docs, component, and CLI improvements. 

The best part? The Angular team wants to add more standalone directives, pipes, and components to the framework in upcoming v14 and v15, with the latest version right along those lines. 

Angular is one of the most used web frameworks in the world. Despite this, even experienced Angular developers find it challenging to get their desired job due to intense competition. 

Turing offers Angular developers long-term, remote jobs in top US companies with unmatched compensation and incomparable career growth. Visit our Jobs page to know more!

Join a network of the world's best developers and get long-term remote software jobs with better compensation and career growth.

Apply for Jobs

Summary
Angular 13: New Features and Updates You Must Know
Article Name
Angular 13: New Features and Updates You Must Know
Description
Angular 13 comes with a range of amazing updates and features to help software developers build great apps. Read more to find out how!
Author
Ashwin Dua
Ashwin is a content writer, editor, and wordsmith who has experience in writing website content, blogs, articles, opinion pieces, press releases, and social media content. He has worked with clients like IRCTC, Hero Cycles, Fortis Healthcare, among others.
Comments

Your email address will not be published