What’s New In Angular 9

The wait for Angular 9 is finally over. With a range of exciting features, the release of Angular 9 is significant as it is a major release from Angular since the last three years. 

Angular 9 introduces some changes to the ecosystem, the most remarkable being Ivy. Ivy enhances bundle size, paves way for quicker testing, improves CSS class, type checking, style binding, debugging and also by default enables AOT compiler on.   

Ivy, which is now the default runtime and compiler, has a tree-shaking feature that will remove dead-code. 

Other than this, Angular also brings two new features to the language service, that is Completions for indexed types and tuple arrays.

Quick Look Into Angular 9

In Angular 9, there are a number of modules and UI templates available for fast development and security. They are:

  1. ag-grid: With a grid look and feel and javascript library , it’s available for all javascript frameworks 
  2. Metronic: DashBord Template 
  3. NgZone/Zone.js:  Change Detection  
  4.  @auth0/angular-jwt: Authentication 
  5. Keycloak-angular: Modern User access management


ag-Grid:

ag-Grid comes in two forms: ag-Grid Community (free for everyone, including production use) and ag-Grid Enterprise (you need a license to use). It suits a single page application with grid UI.

add the module to project: npm  i @ag-grid-community/all-modules

Features:

It comes with column sorting, filtering, pagination , row dragging, and row pinning.

Metronic:

It is based on angular material api and angular bootstrap integration , full application stack and authentication and does not have dependency on jquery.

It has different dashboard themes like multipurpose, SASS application , compact dashboard, trendy and modern dashboard  and it supports native angular application. It reduces 50% of the development effort of dashboard designing.

NgZone/Zone.js:

Angular uses NgZone/Zone.js to know when to trigger UI update (change detection) when the app data state changes. It brilliantly utilizes the events emitted by Zone.js when async operations are performed to detect when to run a change detection cycle.

@auth0/angular-jwt:

This is used to authenticate JSON Web Token and it  provides a HttpInterceptor which automatically attaches a JSON Web Token to HttpClient request.It generates the JWT token to access the app. JWT contains three parts like header, payload and secret, for each login the JWT token will generate , with that token will be able to access the website.

Keycloak-angular:

It is a user access management system. If you want to login , it will redirect you to the keycloak login page . angular app able to get the user values dynamically, from access token user role can be known. In this first keycloak should install then configure realm, then openId connect client should create , then we have to configure the redirect url in the keycloak client settings. To connect with keycloak we have to use client id and client secret and this should add to angular app. Then create the user roles at realm level and client level based on needs. The benefits of this application is faster based on the needs of authorization and it is fully bootstrapped. It prevents access without authentication and authorization.

After configuring of Keycloak, we have to add the modules to out project by using the following command:

npm i keycloak-angular

Top 5 Exciting Features Of Angular 9

  • Default Ivy
  • ModuleWithProviders Support
  • Improvement For Language Service Support
  • Updates For Service Worker
  • Updates For API Extractor

Conclusion

This is a quick look at Angular 9. Hands down, Ivy as default renderer is the most exciting feature of this update! If you want to know more about Angular, or increase your fluency in Angular, check out the most useful Angular certification and training.

About Shweta K R

Shweta K R

Shweta K R, is a SpringPeople technical consultant and master trainer with deep expertise in Java, Spring, Angular & Microservices. In addition to training, she has also architected systems, led projects, and performed requirement analysis.


Posts by Shweta K R

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*