It has only been 4 months since Angular 9.0 was released and Version 10.0.0 of Angular Now available. Angular team is doing excellent work and making Angular framework much better.
Angular 10.0.0 contains the changes in Angular Framework, Angular CLI and Angular Material.
You can read more about the breaking change in Angular 10 from here
Table of Contents
What are the new feature in Angular 10
Angular Material Date Range Picker
Angular Material is now includes Date Range Picker. I think it’s most awaited component that most of the application need. Thanks to Angular Team for releasing this awesome component.
If you want your users to select a range of dates, instead of a single date, you can use the
mat-date-range-picker components. They work in similarly to the
mat-datepicker and the basic datepicker input.
mat-date-range-picker component will look as follows:
You can read more about Angular Material Date Range Picker for here
Warnings about CommonJS imports that can slow down large applications
When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.
TypeScript v3.9 Support
Angular 10 supports Typescript v3.9.
TypeScript 3.6, 3.7 and 3.8 are no longer supported, please update to TypeScript 3.9.
TSLib has been updated to v2.0
TSLint has been updated to v6
Default Browser Configuration
In Angular 10, Browser configuration is update for new project.
The browser configuration for new project is updated to exclude old and less used browsers.
In case if you want to support old browsers, you need to add browser that you want to support in
Enable Optional Stricter Setting
To improve the maintainability of the project and to catch the bugs ahead of time, Angular CLI provides optional flag to set the strict project setup.
You can provide this optional flag while creating new angular workspace as following:
ng new --strict
Strict mode does the following things:
- Enables strict mode in TypeScript
- Turns template type checking to Strict
- Default bundle budgets have been reduced by ~75%
- Configures linting rules to prevent declarations of type any
- Configures your app as side-effect free to enable more advanced tree-shaking
Deprecations and Removals
The Angular Package Format no longer includes ESM5 or FESM5 bundles. It’ll save around 119MB of download and install time when running yarn or npm install for Angular packages and libraries.
Also the support for old browsers IE 9 , 10 and IE mobile are deprecated.
Read more about deprecation from here
How to update Angular 9 to Angular 10.
You can visit Angular update guide to to update any version of angular to Angular 10. It’ll guide you step by step to update to Angular 10.
To have the best update experience, it’s recommended always upgrading one major release at a time.
Run the following command to update angular 9 to angular 10
ng update @angular/cli @angular/core
If you’ve angular material in you project, Run following command as well.
ng update @angular/material
If you’ve other libraries installed in you project. You can run
ng update command. It’ll show you list of commands to run to update to Angular 10.
- How to install angular material in Angular Application
- How to use Angular APP_INITIALIZER token
- How to use environment variable in Angular application
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application
- How to define global constants(variables) in angular
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- Angular Material Button
- Angular Material Toggle Button Example