Angular 5

When did Angular 5 Release?

November 1, 2017. Angular 5 has released with a good amount of improvements. There are few changes regarding the development perspective. we will be discussing some of them here.

Let’s begin with one by one. This blog will help you to understand the comparison to other versions.

1.Package Updation:


Angular CLI will now include Angular 5.0.0 as default.

TypeScript is updated From 2.3 to 2.4.

Reactive extension for JavaScript RxJs has updated to 5.5


2. Build Optimizer / Faster Compilation:

Which developer does not want to get his code compiled quickly?   Changed code should get compiled really fast. So that we can test and confirm on the same we have built so far. Angular versions 2+ are built in TypeScript. TypeScript code is not understandable by Browser.  The smooth and fast compilation is necessary.

Build an Optimizer is a tool included in CLI for making bundles smaller. How? It marks part of your application as pure and removes decorator from runtime code. It Decreases the size of your production build and makes application smaller and faster.

The angular compiler(NGC) compiles your template code to javascript code.  The Angular 4 compiles all the files for every change, thus making development process really slow.

Angular 5 introduces watch options. We can recompile only those files which are needed/Configured. This is making development process super quick.

Time complexity:   Time went from 12-14 seconds to 2-3 seconds of compilation Process.

Pretty cool right?


3. Form Validations:

This particular thing is needed for almost every application. Before Angular 5, validation used to run on every change been made.

Example: Suppose we have one field called password. We are validating if the password has a min of length 6. Whenever the user changes the value, the validate function will get called. This is small use case but has performance issues.

Solution: Angular 5 introduces updateOn property which can have values like a blur, submit. So validated function will be called on those specific events and not on every change.

 Different ways to use updateOn.

  • From controller
Export class LoginComponent{

    loginCtrl = new FormControl('', {

        Validators: [validators.minLength(3)]
        updateOn:'blur'
    });


    UserForm = new FormGroup({

        Login: this.loginCtrl
    })

}

 

  • From HTML ngModel

 

<input name="name"

    [(ngModel)]="user.name"

    [(ngModelOPtions)] ="{updateOn:'submit'}"

    minLength="3"

</input>

 

  • From HTML FormModel

 

<Form [(ngFormOptions)] = "{updateOn:'blue'}">

                ….form fields

 

4. New HttpClient

There is new HttpClient which basically is smaller, easier and more powerful. It is deprecated from the http library of angular. To use  new HttpClient,

import {HttpClientModule} from '@angular/common/http';


You can still use your previous version as well.

map(res => res.json()) is no longer needed with new HttpClient.

5. i18n pipes

Pipes depending on locale are rewritten.

Example: number, currency, date, percent

Now all can have locale as their last parameter. But first, you need to import locale data first. You can configure locale globally or you can pass it via the pipe as well.

There are some hooks you may need are here.

GuardsCheckStart
ChildActivationStartActivationStartGuardsCheckEndResolveStartResolveEnd

 

 

6. New Router LifeCycle Events

Allows the developer to track the routing cycle. Checking the performance, applying some guards becomes easier.  

Conclusion: Angular 5 has really thought from development point of view and they tried to make application lightweight. 

 

Feel free to share your experience with angular 5 in the comment section.

HAPPY ANGULAR CODING!

Looking for AngularJS Development Company? Hire our dedicated developers!

 

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.