Hey guys Greeting!!!, In this session we will understand Angular 5 Features / Top 8 New Features in Angular 5 using example step by step.
Angular 5 pent named as "pentagonal-donut" has the following 8 new features :-
1. Optimized build :- Projects built using Angular CLI will now apply build optimization by default leading to decreased size of JavaScript files with better performance.
2. Server transfer State module :- If you have a screen with country master dropdown, state master drop down , we end up with multiple HTTP calls from client to the server. Server transfer state generates information as part server side, and then transfers it to the client side so that this information does not need to be regenerated.
3. Incremental builds :- In the previous versions of Angular every time we do a build it builds from scratch , you either change or do no change the code. From Angular 5 it will use typescript transform which was introduced in Typescript 2.3. This will ensure speedy builds of the project.
4. Removing White spaces :- Previously white spaces , tabs and so on where part of build output. That can now be removed from the project final build output by providing "preserveWhitespaces" as true in the tsconfig.json file as shown in the below code.
{
...
...
},
"angularCompilerOptions": {
"preserveWhitespaces": false
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
5. Router Life cycle events :- Routing is one of the important part of Angular to create SPA application. In routing we have something called as Route guards. In Angular 5 they have defined routing life cycle which helps to track when router moves from guards to completion state.
The routing life cycle events fire in the following sequence :-
6. Export alias support :- Components and directives can now have multiple names. So when you have code changes internally you can expose with new names with out breaking the existing code.
@Component({
exportAs: 'MyCompV1, MyCompV2',
...
...
}
Export class MyComponent{
}
7. Lambdas in providers :- Syntax of provider factories have become simple. You can now use Lambdas in factories to attach function logics. This makes provider factories simple and to the point.
Component({
provider: [{provide: token1, Myfact: () => null}]
})
export class MyClass {}
8. Blur and submit events :- Events like blur and submit has bee provided for better control on how and when the data will be submitted to the server.
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
<form [ngFormOptions]="{updateOn: 'submit'}">
