Brand

Angular 10

  • Angular 10 was released on 2020 – 24th feb
  • It is a smaller release
  • Comes with below feature
    1. New Date Range Picker
    2. Warnings about CommonJS imports
    3. Optional Stricter Settings
    4. Keeping Up to Date with the Ecosystem
    5. New Default Browser Configuration
    6. Deprecations and Removals
New Date Range Picker

Angular 10 comes with a new date picker, we can use it with mat-date-range-input and mat-date-range-picker components.

<mat-form-field> 
  <mat-label>Enter a date range</mat-label>  
  <mat-date-range-input [rangePicker]="picker"> 
    <input matStartDate matInput placeholder="Start date">  
    <input matEndDate matInput placeholder="End date">  
  </mat-date-range-input>  
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>  
  <mat-date-range-picker #picker></mat-date-range-picker>  
</mat-form-field>
Below screen shot shows the output of this program.

angular-date-range-picker

Warnings about CommonJS imports

In Angular 10, when we use commonJs modules it will throw warnings. Whereas in previous angular versions we get the output as slower and larger applications.

Optional Stricter Settings

Use the below commands to enable the strict features

ng new --strict

After enabling this feature, your new project initializes some settings that improve your app’s overall features such as maintainability, find bugs ahead of time and allow the CLI to perform advanced optimizations on your app.

  • When you enable a strict flag in your app, it configures the app as side-effect free to ensure more advanced tree-shaking.
  • It enables strict mode in TypeScript.
  • It turns template type checking to Strict.
  • By enabling the strict flag, the default bundle budgets have been reduced by upto 75%.
  • It configures linting rules to prevent declarations of type any.

Keeping Up to Date with the Ecosystem

  • TypeScript is updated to TypeScript 3.9
  • TSLib has been updated to v2.0
  • TSLint has been updated to v6

New Default Browser Configuration

In Angular 10 browser configuration for new projects are updated. Here older and less used versions are excluded. We can check the supported browser list using npx browserslist

Deprecations and Removals

  • Angular drops the support for ESM5 or FESM5 bundles
  • Supports typescript 3.9
  • Older browser IE 9,10 are not supported.
Previous
Next
Subscribe Now